เพื่อนใหม่ท่านหนึ่งฝากคอมเม้นท์ไว้ที่บล็อก แต่ว่าคำถามกลับไปอยู่ที่ spam box พึ่งได้เปิดดูเมื่อตะกี้นี้เอง ครั้นเห็นคำถามตอบได้ทันทีก็เลยรีบตอบดีกว่า ประเดี๋ยวโรคประจำตัวคือ ขี้ลืม จะทำพิษให้กลายเป็นการดองคำถาม
Related post ก็คือบทความที่มีความเกี่ยวข้องกัน ในบทความเรื่องใดเรื่องหนึ่งหากว่าเราเอา Related post มาติดไว้ จะช่วยให้ผู้อ่านสามารถค้นหาข้อมูลเพิ่มเติมจากบทความนั้น ๆ ได้ ดิฉันเองเคยนำเสนอ Related post with thumbnail มาแล้วครั้งหนึ่ง นั่นคือบทความที่เกี่ยวเนื่องกัน หรือเราอาจจะใส่หัวข้อว่า บทความที่คุณอาจสนใจ เหมือนในเวบบางแห่งก็เป็นได้ แต่ว่าบทความที่เคยนำเสนอไป เป็นบริการฟรี ๆ ของเวบแห่งหนึ่ง ซึ่งเพื่อนหลายคนบอกว่า เอา code มาติดแล้วก็ไม่เห็นแสดงผล บางวันก็มีโฆษณาของเวบติดมาด้วย บางวันก็ไม่แสดงผลเอาซะเลย เห็นมีปัญหาแบบนี้ วันนี้เลยเอาแบบใหม่ มาลองนำเสนอเพื่อน ๆ ดูค่ะ
Related post ที่นำเสนอวันนี้เป็นแบบข้อความล้วน ๆ ไม่มีรูปภาพมาปะปน มันอาจจะดูไม่หรูเหมือนมีรูปภาพเข้ามาด้วย แต่ก็อาจเหมาะกับบล็อกของเราก็เป็นได้ มาลองดูขั้นตอนในการปรับแต่งเวบบล็อกโดยการสร้าง Related post กันดูนะคะ
ขั้นตอนแรก ให้ Login เข้าไปที่ Blogger>การออกแบบ>แก้ไข html> ติ๊กเครื่องหมายถูกที่ ขยายเทมเพลตวิตเจ็ต ดังรูปด้านบน
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/> |
ขั้นตอนที่ 2 คลิีก crtl+f ค้นหา โค้ดต่อไปนี้ </head> เมื่อเจอให้ copy code ในตารางด้านบนนี้ไปวาง โดยให้วางไว้ก่อนหน้า </head>
ขั้นตอนที่ 3 คลิีก crtl+f เพื่อค้นหา โค้ดต่อไปนี้ <data:post.body/> หรือไม่ก็ <div class='post-body> หรือบาง template ก็ มีรูปแบบ <data:post.body/> จะค้นหาให้ง่าย อธิบายเพิ่มสักนิดว่า เมื่อคลิ๊ก crtl ค้างแล้วคลิ๊ก f จะปรากฏช่องเล็ก ๆ ด้านล่าง บราวเซอร์ ให้ copy โค้ดทีเราต้องการค้นหาวางลงไป แล้วค้นหาด้วยการคลิ๊ก ถัดไปเรื่อย ๆ หากเจอจะมี cursor สีเขียว ๆ ให้ดังรุปด้านบนค่ะ
<b:if cond='data:blog.pageType == "item"'> |
ขั้นตอนที่ 4 เมื่อค้นหา code เจอแล้ว ให้เพื่อน ๆ copy code ในตารางด้านบนนี้วางไว้ต่อจาก code ที่หาเจอ
ขั้นตอนสุดท้าย เลือกบันทึกแม่แบบ แค่นี้ก็เรียบร้อย
เพิ่มเติมอีกนิดนะคะ จากตาราง code ที่ 2 ตรง Related Posts : ข้อความนี้เราสามารถปรับแต่งได้ อาจจะเปลี่ยนเป็นบทความที่คุณอาจสนใจ หรือข้อความอื่น ๆ ได้
อีกที่คือ max-results=5
เป็นค่าที่กำหนดการแสดงผลบทความ หากต้องการให้แสดงกี่บทความเราก็เปลี่ยนที่ จาก 5 เป็น 4 หรือ 3 แล้วแต่อยากจะกำหนด แต่จากการทดลองของดิฉ้นเอง เปลี่ยนค่าเป็น 4 แต่ผลการแสดงกลับเป็น 5 เปลี่ยนค่าเป็น 5 การแสดงบทความเป็น 6 เอาเป็นว่าลองทดสอบดูกันเอาเองค่ะ
ตั้งข้อสังเกตอีกนิด บาง template อาจต้องรอนานกว่าจะมีการแสดงผล บาง template ติดตั้งทันทีใช้ได้เลย เคยทดสอบที่ ชวนเพื่อนเขียนบล็อก มันไม่แสดงผลทันที ก็เลยทิ้งไว้ วันถัดมาลองมาเปิดดู อ้าวปรากฏว่ามีการแสดงผลเกิดขึ้น
ทดลองนำไปปรับแต่งกันดูนะคะ ได้ผลเป็นเช่นไร ชอบใจหรือไม่ แวะมาทักทายกันได้ค่ะ
ที่มา http://widgetsforfree.blogspot.com/2009/01/related-posts-widget-for-blogger.html
2 comments:
ขอบคุณมากครับ
ยินดีนะคะคุณ Kongkawee Plapol
โพสต์ความคิดเห็น