Post Element บน Blogger ได้แก่ส่วนที่เป็นรายละเอียดปลีกย่อยของ Post เช่นบอกชื่อ ผู้เขียนบทความนั้น เวลาที่เขียนบทความ ป้ายกำกับของบทความเป็นต้น บทความนี้ผมจะสอนถึง วิธีดูโค้ดของ Post Element เหล่านี้  วิธีซ่อน/แสดง Post Element  วิธีลบ/เพิ่ม Post Element ในตำแหน่งที่ต้องการ และการปรับแต่ง Post element เหล่านี้ด้วย CSS การปรับแต่งในบทความนี้จะลำดับจากง่ายไปยาก หากคุณได้พบสิ่งที่คุณต้องการและทำได้สำเร็จแล้ว อาจจะไม่จำเป็นต้องตามทั้งหมดของบทความนี้ก็ได้

วิธีเบื้องต้นในการจัดการกับ Post Element
การปรับแต่ง Post Element อย่างง่ายคุณสามารถทำได้โดย
เข้าไปที่ แผงควบคุม >> รูปแบบ (การออกแบบ) >> องค์ประกอบของหน้า

จากนั้น Click แก้ไขที่ กล่องบทความบล็อก



เมื่อปรากฎหน้าต่างเครื่องมือคุณสามารถตั้งค่าต่าง ๆ เกี่ยวกับบทความได้มากมาย เช่น จำนวนบทความที่จะแสดงต่อ 1 หน้า ซ่อน/แสดงวันที่ที่บทความเผยแพร่ ป้ายกำกับ การแสดงปฏิกิริยาโต้ตอบต่อบทความ เป็นต้น

วิธีการซ่อนหรือแสดงทำได้โดย เลือก Element ที่คุณต้องการให้แสดงในบทความ  และยังสามารถแก้ข้อความที่จะแสดงได้ด้วย




และเมื่อเลือก Post Element และปรับแต่งข้อความเสร็จแล้ว ให้เลื่อนมาดูที่ด้านล่าง จากนั้นให้ใช้วิธี Drag and Drop เมาส์เพื่อจัดเรียง Post Element ตามความต้องการ

 

หมายเหตุ วิธีนี้จะใช้ได้กับ Template แบบมาตรฐานเท่านั้น สำหรับ Template ที่แจกฟรีตามแหล่งต่าง ๆ อาจจะทำแล้วสำเร็จบ้าง หรืออาจจะไม่เกิดการเปลี่ยนแปลงใดๆ เลย

ดังนั้นก่อนจะใช้วิธีปรับแต่งในวิธีถัดไปให้คุณลองปรับแต่งโดยใช้วิธีแรกนี้เสียก่อนถ้าได้ผลก็ไม่จำเป็นต้องดำเนินการต่อในขั้นถัดไป


วิธีปรับแต่ง Post Element ใน Template ด้วยวิธีปรับแต่ง HTML

ขั้นที่ 1 รู้จักกับ Post Element Code ในแม่แบบของ Blogger

ก่อนอื่นเราจะต้องทราบว่าโค้ดที่กำหนด Post Element ใช้ชื่อว่าอย่างไร ซึ่งในที่นี้ผมได้ทำการรวบรวมและสรุปได้ดังนี้

class='post-author vcard' เป็นคลาสที่ระบุชื่อผู้เขียนบทความ
class='post-timestamp' เป็นคลาสที่ระบุในเวลาในการเผยแพร่บทความ
class='post_date' เป็นคลาสที่ระบุในวันที่ในการเผยแพร่บทความ
class='post-labels' เป็นคลาสที่ระบุป้ายกำกับของบทความนั้นๆ
class='post-comment-link' เป็นคลาสที่เชื่อมโยงไปยัง Comment ของบทความนั้นๆ
class='post-backlinks' เป็นคลาสที่ระบุ URL ของบทความ หรือเป็น backlinks ของบทความ
class='post-icons'  เป็นคลาสที่กำหนด Email icon และ Quickedit icon ของบทความ
class='reaction-buttons' เป็นคลาสที่ระบุถึงการแสดงปฏิกิริยาโต้ตอบของผู้อ่านต่อบทความนั้นๆ
class='star-ratings'  เป็นคลาสที่กำหนดการให้ Rating ของบทความ
class='post-location'  เป็นคลาสที่ระบุสถานที่ ๆ เขียนบทความ

เมื่อคุณเข้าไปในเมนู แก้ไข HTML และขยายแม่แบบเครื่องมือ แล้วค้นหาด้วย Keyword ของ Post Element ที่ผมได้สรุปเอาไว้ข้างบนคุณจะพบชุดของโค้ดดังนี้

ในที่นี้ผมลองใช้ keyword ในการค้นหาว่า post-author vcard ซึ่งชุดโค้ดที่พบคือ



ส่วนที่ Hilight ไว้ในภาพข้างบนนั้นเป็นส่วนที่แสดงว่าผู้เขียนบทความคือใคร และจะสังเกตเห็นว่าโค้ดดังกล่าวนั้นอยู่ถัดจากโค้ด

<div class='post-footer-line post-footer-line-1'>

แสดงว่าชื่อผู้เขียนจะแสดงอยู่ข้างท้ายบทความ และอยู่ในบรรทัดแรก


ขั้นที่ 2 โค้ด HTML ของ Post Element แต่ละอย่างเป็นอย่างไรบ้าง
เมื่อรู้จักลักษณะโค้ดของ Post Element  ในขั้นที่ 1 แล้ว  ในขั้นนี้ผมจะสรุปว่าโค้ดของ Post Element ที่สำคัญแต่ละอย่างมีโค้ดเป็นอย่างไร

ชื่อผู้เขียนบทความ

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
</span>

หรือใช้โค้ดที่ไม่ขึ้นกับเงื่อนไขคือ

<span class='post-author vcard'> 
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
</span>

เวลาในการเผยแพร่บทความ

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
</span>

หรือใช้โค้ดด้านล่างที่ไม่ขึ้นกับเงื่อนไขใด ๆ

<span class='post-timestamp'> 
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
</span>

วันที่ในการเผยแพร่บทความ

<span class='post_date'>
  <b:if cond='data:post.dateHeader'>
    <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.dateHeader/></a>
  </b:if> 
</span>

ป้ายกำกับของแต่ละบทความ

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
</span>

เชื่อมโยงไปยัง Comment ของบทความ

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
</span>

backlinks ของบทความ

<span class='post-backlinks post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
    </b:if>
  </b:if>
</span>

Email icon และ Quickedit icon ของบทความ

<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
</span>

ปฏิกิริยาโต้ตอบของผู้อ่านต่อบทความ

<span class='reaction-buttons'>
      <b:if cond='data:top.showReactions'>
        <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
          <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
            <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
          <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
        </tr></table>
</span>

Rating ของบทความ

<span class='star-ratings'>
  <b:if cond='data:top.showStars'>
    <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
  </b:if>
</span>

สถานที่เขียนบทความ

<span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
</span>

ขั้นที่ 3 วิธีนำโค้ดของ Post Element วางในตำแหน่งที่ต้องการ

3.1ในขั้นแรกให้เข้าไปเลือก Post Element ที่ต้องการแล้วตั้งค่าที่ต้องการให้เรียบร้อย
โดยเข้าไปที่ รูปแบบ (การออกแบบ) >> องค์ประกอบของหน้า >> จากนั้น Click แก้ไขที่ กล่องบทความบล็อก



3.2 ต่อไปให้เข้าไปลบ Post Element ของเก่าทิ้งเสียก่อน เพื่อไม่ให้ปรากฎซ้ำกับ Post Element ที่จะติดตั้งเข้าไปใหม่
วิธีการลบทำได้โดยค้นหาโค้ดเหล่านี้

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

จากนั้นลบโค้ดที่มีลักษณะคล้ายกับโค้ดที่ได้กล่าวถึงในขั้นที่ 2  โดยโค้ดที่ต้องลบจะมีลักษณะคล้ายกับโค้ดด้านล่าง

<span>
<!--ตรงนี้อาจเป็นโค้ดที่คล้ายกับที่ได้กล่าวไว้ในขั้นที่ 2-->
</span>

  


 

เมื่อทำจบขั้นตอนนี้แล้ว Post Element ของเก่าจะไม่ปรากฎขึ้นมาอีก

3.3 ต่อไปเป็นตัวอย่างการวาง Post Element ด้านล่าง Post Title (หรือชื่อของบทความ)
ให้ค้นหา HTML ทีระบุ Post Title ใน Template ของคุณให้พบ ซึ่งโดยส่วนใหญ่โค้ดที่กำหนด Post Title ของ Template คือ

<div class='post-header-line-1'/>

บาง Template อาจจะเป็นชุดโค้ด

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

ถ้าต้องการให้ Post Element ใดปรากฎอยู่ใต้หัวข้อนี้ก็ให้วางโค้ดเหล่านั้นถัดจากโค้ดบรรทัดนี้  เช่น ถ้าวาง Post Element ชนิดชื่อผู้เขียนบทความลงไปดังนี้ (โค้ดสีม่วง)

<div class='post-header-line-1'/>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
</span>

ผลที่ได้



ต่อไปทดลองวาง วันที่โพสและป้ายกำกับลงไปเพิ่มเติมอีกดังโค้ดด้านล่าง (โค้ดสีเขียว และสีชมพู)

<div class='post-header-line-1'/>
<span class='post-author vcard'> 
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
</span>
<span class='post_date'>
  <b:if cond='data:post.dateHeader'>
    <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.dateHeader/></a>
  </b:if>   
</span>
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
</span>

ผลที่ได้



ต่อไปถ้าเราต้องการให้ Post Element อยู่คนละบรรทัด ทำได้โดยเปลี่ยน Tag <span> ให้เป็น tag <div>

เช่น ในตัวอย่างนี้ผมจะทำให้ป้ายกำกับอยู่คนละบรรทัดกับ ชื่อผู้เขียนและเวลาที่เขียนทำได้ดังนี้

<div class='post-header-line-1'/>
<div class='post-author vcard'>
              <data:top.authorLabel/>
              <span class='fn'><data:post.author/></span>
</div>
<div class='post-date'>
<span class='post_date'>
  <b:if cond='data:post.dateHeader'>
    <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.dateHeader/></a>
  </b:if>
</span>
<span class='post-timestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
</span>
</div>
<div class='post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
              </b:loop>
            </b:if>
</div>

โปรดสังเกตว่า Post Element ที่เปลี่ยนแปลงจาก tag <span> เป็น tag <div> จะทำให้เกิดการขึ้นบรรทัดใหม่ นอกจากนี้ผมยังได้เพิ่ม tag <div class='post-date'>…</div> ให้กับส่วนของเวลาและวันที เพื่อให้บรรทัดดังกล่าวนี้ไม่ชิดติดกับบรรทัดอื่น ๆ

และเมื่อใช้โค้ดข้างบนแล้วจะได้ผลลัพธ์จะเป็นดังนี้  

  

หมายเหตุ
(1) ถ้าต้องการวาง Post Element อื่น ๆ ก็สามารถทำแบบเดียวกัน แต่ให้เลือกโค้ดที่วางลงไปจากขั้นที่ 2 ตามความต้องการ
(2) ถ้าต้องการวางในตำแหน่งอื่น ๆ ที่ไม่ใช่ใต้ชื่อบทความ
เช่น  ถ้าต้องการวางไว้ด้านบนชื่อบทความ ก็ทำเหมือนเดิมทุกประการ แต่จะต้องวางโค้ดของ Post Element เอาไว้ก่อนหน้าโค้ด

<div class='post-header-line-1'/>

ขั้นที่ 4 การใส่ Style ให้กับ Post Element
เมื่อจบขั้นตอนที่ 3 คุณอาจจะไม่ต้องดำเนินการต่ออีก เพราะขี้นตอนนี้เหมาะสำหรับคนที่ต้องการให้ Post Element มีลักษณะพิเศษกว่าเดิมเท่านั้น

สมมติว่าผมได้วาง Post Element ลงไปเหมือนขั้นที่ 3 ทุกประการ  ดังนั้นการปรับแต่ง Post Element ทำได้โดย
กำหนด Class หรือ id ลงไปในโค้ดเดิมดังนี้

<div class='post-header-line-1'/>
<div class='hack-post-element'>
<div class='post-author vcard'>
              <data:top.authorLabel/>
              <span class='fn'><data:post.author/></span>
</div>
<div class='post-date'>
<span class='post_date'>
  <b:if cond='data:post.dateHeader'>
    <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.dateHeader/></a>
  </b:if>
</span>
<span class='post-timestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
</span>
</div>
<div class='post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
              </b:loop>
            </b:if>
</div>
</div>

โค้ดด้านบนหมายความว่าผมกำหนดพื้นที่ของ Post Element ทั้งหมดด้วย class='hack-post-element'

จากนั้นเราก็กำหนด Style ของ class='hack-post-element'  ด้วย CSS

.hack-post-element {
/*ใส่ Style ที่ต้องการ*/
}

สมมติว่าผมใส่พื้นหลังด้วยภาพด้วยการกำหนด CSS ดังนี้

.hack-post-element {
width:100%;
margin: 0 0 10px 0;
padding:5px 5px 5px 50px;
font-variant:small-caps;
font-size:10px;
color:#fff;
background: url(http://upic.me/i/3c/logosymbol.png) 0px 5px  no-repeat;
}

เมื่อนำโค้ดที่กำหนดนี้ไปวางก่อนหน้าโค้ด ]]></b:skin> และบันทึกแม่แบบ ผลที่ได้จะเป็นดังนี้




หรือถ้าต้องการใส่พื้นหลังด้วยสีทำได้โดยการกำหนด Style ดังนี้

.hack-post-element {
width:100%;
margin: 0 0 10px 0;
padding:5px;
font-variant:small-caps;
font-size:10px;
color:#000;
background: #BEBEBE;
border:1px solid #fff;
}
.hack-post-element a{
color:#FF0070;
}

ผลที่ได้จะเป็นดังนี้




ขั้นที่ 5 ต่อไปถ้าเราต้องการใส่ icon ให้กับแต่ละ Post Element

ในที่นี้ผมจะใส่ icon ให้กับ ผู้เขียนบทความ ป้ายกำกับ และวันที่-เวลาที่โพสบทความ ด้วย icon ที่มีขนาด 16x16 ดังนี้


หลักการสร้าง CSS คือการใส่ไอคอนเหล่านี้เป็น backgroud และใส่ค่า padding ให้กับแต่ละคลาสของ Post Element ดังนี้

.post-author{
padding-top:5px;
padding-left:20px;
background:url(http://upic.me/i/9i/duser.png) no-repeat;
height:16px;
}
.post-date{
padding-top:5px;
padding-left:20px;
background:url(http://upic.me/i/cr/whendate.gif) no-repeat;
height:16px;
}
.post-labels{
padding-top:5px;
padding-left:20px;
background:url(http://upic.me/i/1m/minicategory.gif) no-repeat;
height:16px;
}

ผลที่ได้




ผมขอแนะแนวทางในการปรับแต่งให้เท่านี้ครับ ลองนำไปปรับแต่ง Template ของคุณดูอีกที และขอแนะนำว่าก่อนจะปรับแก้อะไรก็อย่าลืม Back up แม่แบบเอาไว้ด้วย เพราะถ้าผิดพลาด หรือไม่่ชอบสิ่งที่ตนอเองได้ปรับแก้ลงไปก็เรียกแม่แบบเดิมกลับมาได้เสมอ  สวัสดีครับ…