วิธีทำ Recent Posts แยกตามป้ายกำกับของ Blogger

สอนทำบล็อก วิธีใช้งาน blogger และ blogspot
บทความนี้ผมจะสอนการทำ Recent Posts และแบ่งแยกออกจากกันโดยใช้ป้ายกำกับแต่ละป้ายกำกับ

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

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


วิธีทำ Recent Posts แบ่งตามป้ายกำกับ

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

วิธีแยกบทความแต่ละ่ Label ออกจากกัน

จากนั้นค้นหาโค้ด </head> เมื่อพบแล้ววางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว
<script src='http://siiam.bravehost.com/recentposts_nothumb_listlabel.js'/>
จากนั้นให้บันทึกแม่แบบ


ขั้นที่ 2 ไปที่ องค์ประกอบของหน้า >> และเพิ่ม Gadget ชนิด HTML/จาวาสคริปต์

แต่ง blogger แต่ง blogspot

จากนั้นวางโค้ดด้านล่างที่ทำการปรับแต่งแล้วลงไปและบันทึก
<script src="http://ชื่อบล็อก.blogspot.com/feeds/posts/default/-/ชื่อป้ายกำกับ?max-results=ใส่จำนวนบทความที่จะแสดง&alt=json-in-script&callback=recentpostslist"></script>

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

ตัวอย่างโค้ดที่ปรับแก้แล้ว
<script src="http://hackublog.blogspot.com/feeds/posts/default/-/Facebook?max-results=10&alt=json-in-script&callback=recentpostslist"></script>


ขั้นที่ 3 ถ้าต้องการสร้าง Recent Posts ของป้ายกำกับอื่นอีกก็ทำซ้ำขั้นตอนที่ 2 เพียงแต่ต้องเปลี่ยนชื่อป้ายกำกับเท่านั้น

สอนสร้าง blog วิธีสร้าง blogger


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

บทความนี้ไม่ยากเลยครับ หากท่านใดต้องการแยก List ของ Posts ในแต่ละป้ายกำกับออกจากกันอยู่พอดีก็ลองทำดู วิธีการในบทความนี้ผมยังสามารถพัฒนาไปสร้างสารบัญของบทความที่แยกแต่ละป้ายกำกับคล้าย ๆ กับบทความนี้ได้อีกด้วย ถ้าสนใจก็ติดตามอ่านในบทความถัดไปและสุดท้ายก็เหมือนเดิมครับถ้าถูกใจบทความนี้ก็วานช่วยกัน Submit หรือบอกต่อด้วยนะครับ สวัสดีครับ

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

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

  1. @ thongchai : ขอบคุณครับคุณ thongchai วิธีแยกหมวดหมู่แบบปกติโดยไม่ต้องทำ Recent Posts ก็มีนะครับ ทำได้โดยใช้เครื่องมือที่มีอยู่แล้วใน Blogger เดี๋ยวจะค่อย ๆ เขียนบทความให้ครับ

  1. ตอนนี้ ยังใหม่อยู่ ครับ..แต่จะพยายามติดตามท่าน...ขอบคุณมากครับ สำหรับความรู้ที่ท่านมีให้

  1. @ marketire : ค่อย ๆ ทำนะครับ ไม่ต้องใจร้อน เดือนเดียวก็เชี่ยวชาญแล้วครับ
    แนะนำให้เริ่มต้นกับบทความ http://www.hackublog.com/2010/06/roadmap-blogger-blogspot.html แล้วค่อยค้นสิ่งที่ต้องการจากสารบัญอีกทีครับ

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

  1. ไม่อยากใส่ชื่อหัวข้ออะครับ มีวิธีแก้ไหมครับ

  1. @ KINGRPG : เว้นว่างเอาไว้ครับ ถ้าเว้นว่างไม่ได้ลองเข้าไปทาง http://draft.blogger.com/ ครับ

  1. ทำได้แล้วค่ะ ขอบคุณมากนะคะ ^^

    และขอรบกวนสอบถามเพิ่มเติมค่ะ
    นุชเลือก tag ABOUT มาไว้ใน "หน้าเว็บ" (เพื่อทำเป็นหนึ่งในแถบ Menu)

    ซึ่งใน tag ABOUT นี้มี 3 บทความด้วยกันค่ะ
    เมื่อทำตามบทความนี้แล้ว ก็จะขึ้นเฉพาะหัวข้อเรียงกันลงมา 3 บทความ


    ทีนี้ หากเราต้องการปรับแต่งให้แต่ละหัวข้อแสดงเป็นทั้งบทความยาวต่อกันลงมาเลย
    หรือ เรียงลงมาแบบ Read more (ในบล็อกนุชได้ทำระบบ Read more ไว้ค่ะ)

    เราจะต้องแก้โค้ดตรงไหนบ้างคะ
    รบกวนสอบถามหน่อยนะคะ
    ขอบคุณมากค่ะ (-/\-)

  1. ในขั้นที่ 1 ให้แก้ จาก

    <script src='http://hackublog.googlecode.com/files/recentposts_nothumb_listlabel.js'/>

    เป็น

    <script src='http://sites.google.com/site/siiamtravel/home/server-1/recentposts_nothumb_listlabel.txt'/>

    เพราะเนื่องจาก google code ได้ลบไฟล์ทิ้งไปแล้ว

    หากท่านต้องการสำรองไฟล์ให้ดาวน์โหลดจากลิงค์ด้านล่างและ upload ไว้ใช้งานเองได้เลย
    http://sites.google.com/site/siiamtravel/home/server-1/recentposts_nothumb_listlabel.txt

  1. วิธีทำ Recent Posts แยกตามป้ายกำกับของ Blogger << สามารถให้มี thumbnail ด้วยได้หรือป่าวครับ

  1. อีกหนึ่งวิธีที่ขอเอาไปใช้นะคะ

  1. ผมจะทำ Recent Posts แยกตามป้ายกำกับ แล้วมีรูปภาพแสดง ไม่ทราบว่าต้องทำแบบไหนครับ รบกวนด้วย

  1. ดิฉันเขียนบทความใหม่ พบว่าไปปรากฏทุกป้ายกำกับในบล็อก ทั้งๆ ที่ดิฉันใส่ชื่อป้ายกำกับใหม่ในบทความนั้นแล้ว จะแก้ไขได้อย่างไรคะให้บทความนั้นปรากฏที่ป้ายกำกับนั้นๆ เพียงแห่งเดียง

  1. Error ค่ะ เข้าไปดูบล๊อกวันนี้ ปรากฎว่า recent posts ในบล๊อกมันไม่แสดงรายการเลยค่ะ ไม่แน่ใจว่าเป็นเพราะอะไร
    เพราะใช้โค้ดมาตั้งนานแล้วไม่มีปัญหาอะไร (ใช้ recent posts แถว footer ค่ะ)
    http://bypennystocks.blogspot.com/

  1. ช่วยเช็คสคริปให้หน่อยครับ ของผมก็หายเหมือนกัน

  1. ทำได้แล้วครับ มีรูปด้วย ขอบคุณครับ

    http://small-zone.blogspot.com

  1. อ.Hack ครับ มีปัญหาอย่างนี้ครับ เวลาทำด้วย url ของ blogspot.com มันก็แสดงออกมาตามหัวข้อดีอยู่อ่ะครับ แต่พอเปลี่ยน url เป็น .com มันไม่ขึ้นอ่ะครับ ต้องทำยังไงดีเอ่ย www.mvstations.com

  1. @lanterone @อ.Hack ทำให้มีรูปด้วยยังไงอ่ะครับ

  1. แสดงรูปด้วยทำยังไงครับ...

  1. กำ ใช้ไม่ได้อะครับ ช่วยอัพโหลดไฟล์ใหม่ให้ทีครับ

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

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

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