วิธีปรับแต่ง Post Elements บน Blogger

สอนทำบล็อก วิธีแต่ง blogspot หรือ blogger Post Element บน Blogger ได้แก่ส่วนที่เป็นรายละเอียดปลีกย่อยของ Post เช่นบอกชื่อ ผู้เขียนบทความนั้น เวลาที่เขียนบทความ ป้ายกำกับของบทความเป็นต้น

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

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


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

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

สอนวิธีทำ blogger หรือ blospot

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

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


สอนสร้าง blogger

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

แต่ง blogspot 

หมายเหตุ วิธีนี้จะใช้ได้กับ 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 แก้ไขที่ กล่องบทความบล็อก

ทำ blog

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>

สอนสร้าง blogspot

  
สอนแต่งบล็อกของ blogger

 สร้าง blog

เมื่อทำจบขั้นตอนนี้แล้ว 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>

ผลที่ได้

สอนปรับแต่ง Post ของ blogger

ต่อไปทดลองวาง วันที่โพสและป้ายกำกับลงไปเพิ่มเติมอีกดังโค้ดด้านล่าง (โค้ดสีเขียว และสีชมพู)
<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> ให้กับส่วนของเวลาและวันที เพื่อให้บรรทัดดังกล่าวนี้ไม่ชิดติดกับบรรทัดอื่น ๆ

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

ปรับแต่ง Template blogger  

หมายเหตุ
(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> และบันทึกแม่แบบ ผลที่ได้จะเป็นดังนี้

blogger gadget


หรือถ้าต้องการใส่พื้นหลังด้วยสีทำได้โดยการกำหนด 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;
}
ผลที่ได้จะเป็นดังนี้

blogger widget


ขั้นที่ 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;
}

ผลที่ได้

แต่ง blogger และ blogspot


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

ตอนนี้มีความคิดเห็น : 9 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ข้อมูลดีมีคุณภาพเช่นเคยครับผม

  1. @ Death13rd : ขอบคุณมากครับ

  1. ใช้ Argentpress Blogger Template ครับ แต่หาโค้ดในข้อ 3.2 ไม่เจอ

    แต่เจอโค้ดที่มีลักษณะใกล้เคียงกันครับ คือ

    div class='post-footer-line post-footer-line-1'/

    ลองใส่ดูแล้ว ปรากฎว่า ทุกอย่างไปอยู่ใต้บทความ ไม่ได้อยู่ใต้ชื่อบทความ

    และ Post Element อันเดิมก็ยังอยู่ด้วยครับ

  1. ถ้าจะวางด้านล่างชื่อบทความจะต้องวางไว้ถัดจากโค้ดนี้ครับ
    <div class='post-header-line-1'/>

  1. ได้ข่าวว่า Blogger update หน้า Elements เพิ่มIconsเข้ามาให้ใช้ด้วย

  1. ใช้เทมเพลจสำเร้๗รูปค่ะ แล้วใน page element มี blog post 2 อัน จะลบออกอันนึงต้องทำยังไงคะ

  1. อยากทราบว่า ถ้าทำ Icon เป็นรูปของผู้เขียนบทความจะทำได้มั้ยครับ
    เพราะ blog ผมมีผู้เขียนบทความหลายคนอะ =v=

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. สอบถามเรื่องโพสหน่อยครับ คือผมโพสบทความไปแล้วแต่มันไม่แสดงที่หน้าแรกครับ จะต้องแก้ยัง รบกวนหน่อยครับ http://ramita-health-beauty.blogspot.com

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel