วิธีแสดงบทความที่เกี่ยวข้องพร้อมรูปประกอบ (Related Article with thumbnail)

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

วิธีสร้าง
ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

ขั้นที่ 2 ให้ค้นหาโค้ด แล้วแทนที่ด้วยโค้ดต่อไปนี้



< style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
< /style>
< script src='http://hackublog.googlecode.com/files/related-with-thumbs.js' type='text/javascript'/>
< /b:if>
< !--Related Posts with thumbnails Scripts and Styles End-->
< /head>

ขั้นที่ 3 ต่อไปให้ค้นหาโค้ดที่มีลักษณะคล้ายหรือเหมือนกับ

หรือพยายามหาโค้ดแบบนี้

แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว



< div id='related-posts'>
< b:loop values='data:post.labels' var='label'>
< b:if cond='data:label.isLast != "true"'>
< /b:if>
< b:if cond='data:blog.pageType == "item"'>
< script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>Related Posts with thumbnails for bloggerblogger widgets
< script type='text/javascript'>
var currentposturl="";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
< /script>
< /div>


< /b:if>
< !-- Related Posts with Thumbnails Code End—>

หมายเหตุ อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทความ และคำว่า Related Posts สามารถแก้ไขได้อย่างเช่นบล็อกของผมแก้เป็นคำว่า บทความที่เกี่ยวข้อง

เสร็จแล้วอย่าลืมบันทึกแม่แบบด้วยนะครับ และเช่นเคยถ้าแก้แล้วกลัวพลาดให้

ทำการสำรองแม่แบบก่อนแก้ไข HTML นะครับ