Cara Menampilkan Related Posts Thumbnail

Menampilkan link postingan terkait dengan thumbnail gambar akan memperindah tampilan halaman blog. Dengan tampilan gambar ini, pengunjung blog akan tertarik untuk membaca posting terkait ketika mereka disajikan gambar menarik dengan thumbnail. 

Untuk menampilkan thumbnail related posts, berikut langkah-langkahnya:

1. Masuk ke dashboard Blogger >> Rancangan atau Layout >> Edit HTML dan centang "Expand Template Widget"

2. Cari kode: </head> lalu ganti dengan:

<!--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/AVvXsEiDMxBPGaEobhbijqaj1qROkJVJJIFZjHPOgeGzFsN52xLKuTNweJ_bcMY1l1-jezY5DkYUBNfAJr8iHJt82EbUrqYQ7AaP8wIsX26hO8hASxXXAbQhHrxirax45b94CwSg7knrCmCkpIQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. Setelah itu, cari kode:  <div class='post-footer-line post-footer-line-1'>
Jika tidak menemukannya, cari kode:  <p class='post-footer-line post-footer-line-1'>

Setelahnya, letakkan kode di bawah ini pada salah satu baris tempat potongan kode ini berada:

<!-- 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'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4. Selesai. 

Silahkan mencoba.

[referensi http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html]