Related Post with Thumbnail for Blogger:

Hi hi.. Semuanya setelah kita kemarin sempat merayakan hari Natal, dan berhenti posting apapun. Hihihi... Alasannya tentu saja karena kita sedang merayakan Natal tersebut.
Nah, pada hari ini saya akan kembali memposting sesuatu yaitu mengenai "Related Post w/ Thumbnail". Tentu bagi para blogger-blogger senior sudah pada tahu apa itu "Related Post w/ Thumbnail". Nah disini saya akan membahas kembali bagaimana cara memunculkan "Related Post w/ Thumbnail" di halaman Blogger kita.

Langsung saja:
1. Login ke akun blogger kamu.
2. Klik Layout > Edit HTML, dan jangan lupa untuk klik Expand Widget Templates
3. Ganti kode </head> atau replace kode </head> dengan

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Keempat, temukan kode ini
<div class='post-footer-line post-footer-line-1'>

atau
<p class='post-footer-line post-footer-line-1'>

Dan letakkan kode dibawah ini, dibawah kode diatas

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Kamu dapat mengganti kata-kata berwarna merah dengan yang kamu inginkan,
var maxresults=5 menandakan jumlah Related Post dibawah suatu Post
Related Posts dapat diganti dengan kata-kata semisal "Coba ini juga", atau apapun lah :)

6. Save Template
7. Dan coba klik salah satu postingan kalian, akan nampak seperti dibawah ini

Nah, selesai sudah tutorial bagaimana cara membuat "Related Post with Thumbnail". Semoga bermanfaat bagi kalian semua. Dan jangan lupa komennya ya. Jadi aku bisa tahu apa kekurangannya :)