Related post บทความที่คุณอาจสนใจ ใน blogger

Written By Aucharaporn Theemcle on วันจันทร์ที่ 17 ตุลาคม พ.ศ. 2554 | 22:30

เพื่อนใหม่ท่านหนึ่งฝากคอมเม้นท์ไว้ที่บล็อก แต่ว่าคำถามกลับไปอยู่ที่ spam box พึ่งได้เปิดดูเมื่อตะกี้นี้เอง  ครั้นเห็นคำถามตอบได้ทันทีก็เลยรีบตอบดีกว่า  ประเดี๋ยวโรคประจำตัวคือ ขี้ลืม  จะทำพิษให้กลายเป็นการดองคำถาม  

Related post  ก็คือบทความที่มีความเกี่ยวข้องกัน  ในบทความเรื่องใดเรื่องหนึ่งหากว่าเราเอา Related post มาติดไว้  จะช่วยให้ผู้อ่านสามารถค้นหาข้อมูลเพิ่มเติมจากบทความนั้น ๆ ได้ ดิฉันเองเคยนำเสนอ Related post with thumbnail มาแล้วครั้งหนึ่ง นั่นคือบทความที่เกี่ยวเนื่องกัน หรือเราอาจจะใส่หัวข้อว่า บทความที่คุณอาจสนใจ เหมือนในเวบบางแห่งก็เป็นได้  แต่ว่าบทความที่เคยนำเสนอไป  เป็นบริการฟรี ๆ ของเวบแห่งหนึ่ง ซึ่งเพื่อนหลายคนบอกว่า เอา code มาติดแล้วก็ไม่เห็นแสดงผล  บางวันก็มีโฆษณาของเวบติดมาด้วย  บางวันก็ไม่แสดงผลเอาซะเลย  เห็นมีปัญหาแบบนี้   วันนี้เลยเอาแบบใหม่ มาลองนำเสนอเพื่อน ๆ ดูค่ะ

Related post ในบล็อก

Related post  ที่นำเสนอวันนี้เป็นแบบข้อความล้วน ๆ ไม่มีรูปภาพมาปะปน  มันอาจจะดูไม่หรูเหมือนมีรูปภาพเข้ามาด้วย  แต่ก็อาจเหมาะกับบล็อกของเราก็เป็นได้ มาลองดูขั้นตอนในการปรับแต่งเวบบล็อกโดยการสร้าง 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>

การค้นหา code ในบล้อกเกอร์

ขั้นตอนที่ 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"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

ขั้นตอนที่ 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 กล่าวว่า...

ขอบคุณมากครับ

meesubandmeesuk กล่าวว่า...

ยินดีนะคะคุณ Kongkawee Plapol

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