ปุ่ม "สารบัญ" อยู่ตำแหน่งบนขวาสุดใช้เพื่อดูหัวข้อบทความทั้งหมดของบล็อกนี้ครับ
Loading...

วันเสาร์ที่ 8 สิงหาคม พ.ศ. 2552

การแสดงเรื่องที่เกี่ยวข้อง (Related Post)

RELATED POST
เรื่องที่เกี่ยวข้อง บางเว็บอาจใช้คำว่า "เรื่องอื่น ๆ ที่ใกล้เคียง" ซึ่งนั่นก็คือ Related Post ในภาษาอังกฤษนั่นเอง สำหรับ Blogger นั้น การสร้าง Related Post ก็คือการดึงเอาชื่อเรื่องทั้งหมดที่ใช้ป้ายกำกับ(Label) เดียวกันมาแสดง และส่วนใหญ่จะวางต่อท้ายจากเนื้อหา แต่ถ้าจะวางไว้ตำแหน่งอื่น ๆ ก็ไม่ผิดอะไร แต่คนส่วนใหญ่จะไม่คุ้นเคย ดังนั้นจะเห็นได้ว่าป้ายกำกับมีส่วนสำคัญมากในกรณีนี้ เพราะถ้าเราใช้ป้ายกำกับของเรื่องที่ไม่เกี่ยวข้องกันก็จะทำให้ผู้อ่านไม่สนใจในสิ่งที่เราต้องการให้อ่านเช่นกัน

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

สำหรับบล็อกที่ผมทำอยู่จะวางอยู่ถัดจากเนื้อหา โดยมีวิธีการทำดังนี้

ขั้นตอนที่ 1 ให้ไปที่เมนู/ตำแหน่ง แม่แบบ|แก้ไข HTML|แก้ไขแม่แบบ (Layout|Edit HTML|Edit Template)

ขั้นตอนที่ 2 ทำการบันทึกสำเนาแม่แบบเสียก่อน(BACKUP Your Template)

ขั้นตอนที่ 3 ให้ติ๊กไปที่ขยายแม่แบบเครื่องมือ(Check Expand Widget Templates) แล้วหาตำแหน่งโค๊ด <div class='post-footer-line post-footer-line-3'> ... </div>

ขั้นตอนที่ 4 ให้เพิ่มโค๊ดเข้าไปอีกหนึ่งบรรทัด(ตัวสีแดง)
<div class='post-footer-line post-footer-line-3'> ... </div>
<div id='related_posts'>

สำหรับบล็อกของผมจะวางไว้ก่อนตำแหน่ง Post Footer ให้ลองหาคำว่า <div class='post-footer'> แล้ววางไว้ข้างบน สังเกตุว่าผมจะวางไว้หลังจากสิ้นสุดเนื้อเรื่องทันที

ขั้นตอนที่ 5 เลื่อน ScrollBar ไปที่ตำแหน่งล่างสุดแล้วจะเจอคำว่า
</body>

ขั้นตอนที่ 6 ให้เพิ่มโค๊ดไว้ก่อนหน้า ดังนี้


<div class='post-footer'> <script src='http://www.google.com/jsapi'><br/><script src='http://exhibit.110mb.com/file/RelatedPost.js' type='text/javascript'/'>

http://www.google.com/jsapi เป็น Java Speech API(JSAPI) สำเร็จรูปที่ทาง Google สร้างขึ้นมา
http://blogger-assistant.110mb.com/RelatedPost.js http://exhibit.110mb.com/file/RelatedPost.js ก็เป็น Java Script สำเร็จรูปเช่นเดียวกัน พัฒนาโดย Yu-Jie Lin
*แก้ไขที่เก็บ Java Script RelatedPost.js เนื่องจากมีปัญหาที่อยู่เดิม ทางที่ดีควรจะมี host file ของตัวเองและเก็บเอาไว้น๊ะครับ

ขั้นตอนที่ 7 ทำการบันทึกแม่แบบ(Save Template)

1 ความคิดเห็น:

Perierga กล่าวว่า...

บันทึกแม่แบบไม่ได้อ่ะครับ มันขึ้นว่า div ไม่ถูกต้องอะไรเนี่ยแหละ
ต้องปิด &ltdiv&gt ตรงไหนด้วยหรือเปล่าครับ
แก้ไม่เป็นอ่ะครับ T T
ขอบคุณครับ

 
TopBottom