Membuat Related Post Dengan Thumblain

Sebelumnya saya udah nge share cara buat related post tapi itu sih yang masih biasa... dan sekarang saya akan coba nge share Related Post dengan Thumbnail.. bedanya tuh yang ini ada gambarnya aja sih.. tapi kegunaan masih sama kok. tapi jika di antara sobat blogger ada yang mau pakai ini dia caranya. :

1. Pastikan postingan blog anda sudah dikelompokan berdasarkan label karena related post/postingan terkait ini muncul berdasarkan label yang anda buat.
2. Masuk ke blogger.com
3. Masuk ke menu Design - Edit HTML
4. Checklist Expand Widget Templates
5. Cari kode </HEAD>
6. Kemudian tempatkan kode berikut tepat di bawah kode tadi :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BKOBCTtFwwSqJ6FzhfkPBdwfctQVhK8OmJTMrn7ddQiLIdd81O6CuJCMUqrPyOf5naB8T8-qe36GjeymgvLChczL6GN5Lgu8vWLa5F2r1getr-LbfppXSmU-KraUMaTnEFVrrWdChW0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note  :

• var maxresults=5;  angka 5 adalah jumlah related post yang ditampilkan
• var relatedpoststitle="Related Posts"  Sobat bisa mengganti related post dengan kata-kata Sobat sendiri
• 
  
  vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BKOBCTtFwwSqJ6FzhfkPBdwfctQVhK8OmJTMrn7ddQiLIdd81O6CuJCMUqrPyOf5naB8T8-qe36GjeymgvLChczL6GN5Lgu8vWLa5F2r1getr-LbfppXSmU-KraUMaTnEFVrrWdChW0/s400/noimage.png"; adalah gambar thumnail jika pada postingan Sobat tidak ada gambarnya, Sobat bisa mengganti dengan gambar Sobat sendiri.

4. Kemudian cari kode ini :
<div class='post-footer-line post-footer-line-1'>

atau ini (mana saja yang dapat):
<p class='post-footer-line post-footer-line-1'>

Kopikan kode ini tepat dibawahnya (salah satu diatas mana yamg ketemu):

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<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 gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

proses selsai, selamat mencoba yah dan semoga berhasil