วิธีสร้างสารบัญของบทความในแต่ละป้ายกำกับบน blogger

LABEL-INDEX ผมเคยได้กล่าวถึงวิธีสร้างตารางสารบัญของบทความบน Blogger ไว้ครั้งหนึ่งในบทความ วิธีสร้างตารางสารบัญของบทความบน Blogger แต่มีสมาชิกบางท่านได้สอบถามมาว่าตารางสารบัญดังกล่าวนี้จะแยกออกมาเป็นแต่ละป้ายกำกับได้หรือไม่ หลังจากที่ผมได้ทดลองดูก็พบว่าสามารถทำได้คล้ายกับวิธีในบทความ วิธีทำ Recent Posts แยกตามป้ายกำกับของ Blogger และผลลัพธ์ที่ได้ก็คล้ายกับ Module(ฟังก์ชันการทำงานในเว็บไซต์เดียวกันที่ทำงานอิสระจากกัน) ใน CMS (เว็บไซต์กึ่งสำเร็จรูป) ตัวอื่น ๆ เลยทีเดียว

อย่างไรก็ตามวิธีนี้จะใช้ได้ดีกับบล็อกที่ติดป้ายกำกับให้บทความเพียงป้ายเดียว เพราะถ้าหากมีบทความใดติดป้ายกำกับมากกว่า 1 ป้ายกำกับ  บทความดังกล่าวจะไปปรากฎในทุกๆ สารบัญของป้ายกำกับที่ได้ติดให้กับบทความนั้น

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

วิธีลบป้ายกำกับออกจากบทความ
เข้าไปที่แผงควบคุม >> การส่งบทความ >> แก้ไขบทความ

สร้างตารางสารบัญบน blogger

เลือกบทความที่ต้องการลบป้ายกำกับออก

วิธีเขียนบล็อก วิธีสร้างบล็อก

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

สอนแต่งบล็อก แต่ง blogspot


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

ขั้นที่ 1 Log in เข้าไปที่ blogger.com >> แผงควบคุม >>  การออกแบบ >> แก้ไข HTML

การใช้งาน blogger

ค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดต่อไปนี้เอาไว้ก่อนหน้าโค้ดดังกล่าว
<script src='http://hackublog.googlecode.com/files/blogtoc-min.js'/>
เมื่อวางโค้ดเรียบร้อยแล้วบันทึกแม่แบบและดำเนินการต่อในขั้นที่ 2 ครับ


ขั้นที่ 2 สร้างหน้าเว็บ หรือบทความใหม่ขึ้นมา 1 หน้า เพื่อสร้างสารบัญให้กับแต่ละบทความ

คู่มือการทำ blogger หรือ blogspot


ขั้นที่ 3 วางสคริปต์ต่อไปนี้ลงในหน้าเว็บหรือบทความที่สร้างขึ้นแล้วบันทึก

<script src="http://hackublog.blogspot.com/feeds/posts/summary/-/Facebook?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
แนวทางการปรับแต่งโค้ด

3.1 ให้แทนที่ http://ชื่อบล็อก.blogspot.com ด้วย URL ของบล็อกของคุณเอง
3.2 แทนที่ ชื่อป้ายกำกับ ด้วยชื่อป้ายกำกับในบล็อกของคุณตามความต้องการ โดยต้องระวังเรื่องอักษรพิมพ์เล็กพิมพ์ใหญ่ และการเว้นวรรคของคำด้วย เพราะถ้าหากใส่ผิดบทความจะไม่ปรากฎ

โค้ดตัวอย่าง
<script src="http://hackublog.blogspot.com/feeds/posts/summary/-/Facebook?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

รูปตัวอย่างการวางโค้ด

ทำสารบัญของบทความใน blogger

ตัวอย่างผลลัพธ์

ทำบล็อก ทำ blog

หมายเหตุ
ในขั้นที่ 2 ถ้าไม่ใช้วิธีสร้างบทความหรือหน้าเว็บขึ้นมาใหม่อาจจะใช้ HTML/จาวาสคริปต์ Gadget ในการวางโค้ดก็ได้


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


ขั้นที่ 5 ถ้าต้องการทำลิงค์ไปยังหน้าเว็บหรือบทความที่เป็นสารบัญที่สร้างขึ้นมี 3 ทางเลือกคือ

5.1 วิธีที่ง่ายที่สุดคือใช้ gadget Linklist ของ blogger

วิธีสร้างblog

5.2 ในกรณีที่ขั้นที่ 2 คุณใช้หน้าเว็บในการทำตารางสารบัญก้ควรใช้ gagdget หน้าเว็บทำเมนู Link ไปหาสารบัญ
อ่านวิธีทำได้จากบทความ Gadget หน้าเว็บ พร้อมตัวอย่างการใช้
5.3 สร้างเมนูขึ้นมาเองโดยศึกษาได้จากบทความในหมวดหมู่ Create Menu ครับ

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

  1. ลองดูแล้วค่ะ แต่ไม่แสดงลิงค์บทความในหน้า page เลย
    http://bypennystocks.blogspot.com/ ใช้โค้ดนี้ใน page ที่ชื่อ Test ค่ะ
    @3@

  1. @AMbox: จาวาสคริปต์ที่ผมทำไว้มันหมดอายุครับ

    ให้แทนที่โค้ดในขั้นที่ 1
    <script src='http://hackublog.googlecode.com/files/blogtoc-min.js'/>

    ด้วยสคริปต์
    <script src='http://siiam.bravehost.com/blogtoc-min.js'/>

    ได้ไม่ได้ยังไงบอกด้วยนะครับ

  1. เปลี่ยนโค้ดตามที่บอกแล้วค่ะ แต่มันแสดงรายการบทความของทุกป้ายกำกับเลยค่ะ ตั้งใจว่าจะทำใช้ป้ายกำกับเดียวในแต่ละ page

    http://bypennystocks.blogspot.com/p/test.html

  1. @By Penny Stocks : ถ้าคุณต้องการแยก post ให้เป็นหมวดหมู่ผมแนะนำให้ใช้ gadget ป้ายกำกับ ๆ ติดตั้งหลาย ๆ อัน แล้วตั้งค่าให้แต่ละอันแสดงป้ายกำกับไม่เหมือนกันก็ได้ครับ

    ส่วนสคริปต์นี้เราต้องใส่ชื่อป้ายกำกับให้ถุกต้องในขั้นที่ 3 ครับ

  1. ผมทำตามขั้นต้อนแล้วครับ

    ผมลัพธ์ที่ได้แนวทางเป็นไปตามความต้องการแล้วครับ แต่ก็เกิดปัญหาขึ้น

    ปัญหาแรก ปรากฏว่า รายการบทความมันแสดงซ้ำ เหมือนกับ วาง Scriptที่มีชื่อป้ายกำกับเดียวกัน ในหน้าแก้ไข HTML ของบทความไว้ซ้ำๆกัน แต่ผมตรวจสอบแน่ใจแล้วว่าไม่มีการว่างScriptซ้ำกัน ใน ป้ายกำกับเดียวกันแน่นอน และทุกบทความผมก็ใช้แค่ป้ายกำกับเดียวเท่านั้น

    ปัญหาที่สอง เนื่องจาก ชื่อป้ายกำกับของผมเป็นภาษาไทย เวลาเข้าไปแก้ไขบทความ ตัวอักษรจะเป็นตัวหนอนทันที ท่านไม่ออก(สัญนิษฐานว่าเกี่ยวข้องกับการเข้ารหัสให้เป็น UTF-8) ต้องเข้าไปแก้ไขตรงไหน รบกวนช่วยให้คำแนะนำด้วยครับ ขอบคุณครับ

    ลิ้งบล๊อกที่ใช้ป้ายกำกับภาษาไทย--> http://loadmundeee.blogspot.com

    ลิ้งแสดงผลลัพธ์ของบทความ--> http://loadmundeee.blogspot.com/p/blog-page.html

  1. ผมลองทำตามแล้วคับแต่มันไม่ขึ้นอะไรเลยครับ
    ลองตั้งชื่อป้ายกำกับเป็นภาษาอังกฤษแล้วก็ไม่ขึ้นอยู่ดีครับ
    นี่ครับ
    http://workinformations.blogspot.com/

  1. แล้วจะเอาเลขที่มันเรียง 1 2 3 4 5 ออกได้ไหมครับ

  1. เราจะลบ 1 2 3 4 5 เรียงออกได้ไหมครับ อยากเอาออกมากเพราะผมใช้ center แล้วเลขมันไม่ติดมาด้วย ช่วยบอกวิธีเอาออกทีครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ลองทำแล้ว ไม่แสดงผลค่ะ จาวาสคริปต์หมดอายุหรือป่าวคะ

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

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

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