การสร้างสารบัญบล็อก (Creating Table of Content)

ประโยชน์ของสารบัญบล็อกก็เหมือนกับสารบัญหนังสือ คือ เพื่อต้องการให้ผู้อ่านสามารถทราบถึงหัวข้อเรื่องต่าง ๆ ที่มีอยู่ในหนังสือ สำหรับการทำบล็อกก็เช่นเดียวกัน ในกรณีที่เรามีบทความค่อนข้างเยอะ ถึงแม้ว่าเราจะแบ่งบทความเป็นหมวดหมู่โดยการใช้ป้ายกำกับ แต่เวลาที่เราคลิ๊กไปที่ป้ายกำกับแต่ละครั้งก็จะแสดงเนื้อหาของบทความด้วย และถ้ามีหลาย ๆ บทความ เราก็คงต้องให้ผู้เข้าชมเว็บคลิ๊กหน้าถัดไปเรื่อย ๆ หรือบางคนก็อาศัยชื่อเรื่องจาก Archive แต่ก็นั่นแหละครับ มันไม่ค่อยสะดวกในทุกประการ ลองคลิ๊กไปที่มุมบนขวาเพื่อดูเป็นตัวอย่างก่อนได้ครับ

สำหรับการสร้างสารบัญบล็อกก็ไม่ใช่เรื่องยาก เพราะผมเอาแบบวิธีง่าย ๆ มาใช้(ความจริงแล้วก็มีอยู่หลายแบบ) เรามาดูขั้นตอนการสร้างสารบัญกันเลยดีกว่า

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML แล้วเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> check the "Expand Widget Templates" check box)


ขั้นตอนที่ 2 ค้นหาคำว่า <b:include data='post' name='post'/> แล้ววางโค๊ดต่อไปนี้แทนที่

<b:if cond='data:blog.homepageUrl !=data:blog.url'>

     <b:if cond='data:blog.pageType != "item"'>

         <a expr:href='data:post.url'>

   <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">

         <data:post.title/></div></a>

     <b:else/>

         <b:include data='post' name='post'/>

     </b:if>

 <b:else/>

     <b:include data='post' name='post'/>

 </b:if>

การปรับแต่ง
background:#EAE9E9 คือสีพื้น
color:#406A0E คือสีของชื่อบทความ
นอกจากนั้นก็ยังสามารถปรับแต่งให้มีเส้นขอบหรือความหนาได้ตามต้องการจากโค๊ดข้างบนครับ

ขั้นตอนที่ 3 ทำการบันทึกแม่แบบ

ยังไม่จบครับ ทำตามขั้นตอนต่อไป

ขั้นตอนที่ 4 ไปที่ รูปแบบ|องค์ประกอบของหน้า แล้วคลิ๊กที่ เพิ่ม Gadget (Layout|Page Elements -> click Add Gadget)

ขั้นตอนที่ 5 หลังจากนั้นจะมีหน้าต่างเพิ่ม Gadget ให้เลือก HTML/จาวาสคริปต์ (HTML/JavaScript) แล้วนำโค๊ดต่อไปนี้วางไว้ที่ส่วนเนื้อหา

<a href="http://YourBlogName.blogspot.com/search?max-results=200">Show all post &raquo;&raquo;</a>

การปรับแต่ง
YourBlogName คือ ชื่อบล็อกของเรานั่นเอง
200 คือ จำนวนรายชื่อบทความที่ต้องการให้แสดง
ถ้าต้องการให้แสดงรายชื่อบทความเฉพาะป้ายกำกับที่ต้องการให้เปลี่ยนลิงค์ไปที่ป้ายกำกับนั้น ๆ ตัวอย่างเช่น ผมต้องการให้เปิดสารบัญเฉพาะป้ายกำกับ การปรับแต่งบล็อกขั้นสูง โดยให้ชื่อหัวข้อว่า "การปรับแต่งบล็อกขั้นสูง" ด้วยเช่นกัน ก็จะได้โค๊ดดังนี้

<a href="http://blogger-assistant.blogspot.com/search/label/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9B%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B9%81%E0%B8%95%E0%B9%88%E0%B8%87%E0%B8%9A%E0%B8%A5%E0%B9%8A%E0%B8%AD%E0%B8%81%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%AA%E0%B8%B9%E0%B8%87/search?max-results=200">การปรับแต่งบล็อกขั้นสูง &raquo;&raquo;</a>

ผลที่ได้ ลองคลิ๊กดูครับ

>>> การปรับแต่งบล็อกขั้นสูง <<<

เห็นไหมครับว่า ไม่มีอะไรยาก....