Related posts for blogger is a widget that help you to show your related blog posts below your every posts page, and this widget also show the thumbnail of posts to make this widget better.

Menampilkan Related Post (postingan terkait) membantu menambah jumlah pageview (tampilan halaman) blog sobat, pengunjung akan terpancing untuk melihat artikel terkait yang disajikan dalam bentuk thumbnail.
Untuk menampilkan artikel terkait widget ini akan menggunakan gambar yang di upload dari postingan sobat, seperti yang terlihat pada screenshot gambar dibawah ini....

Preview :

Untuk membuatnya simaklah langkah-langkah di bawah ini....

Langkah 1

Masuk ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML dan centang "Expand Template Widget" kotak centang.

Langkah 2

Cari kode </head> dan gantikan dengan kode dibawah ini

<!--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/AVvXsEiy1OtRrb12btA5BcyiOlcbqvYZ-ZtTcJh5z4JFcoDI4J5euz_KMPwQJa2cVJVCr7aeC0lvmO1FF6lOMRbWWfawvggSYKazvcg0l1V59WYiaza_RZpBkngICygE47ahMn26rBhzBuY9pmo/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-->
</head>

Langkah 3

Sekarang anda cari kode berikut (gunakan CTRL + F)

<div class='post-footer-line post-footer-line-1'>

atau

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

Langkah 4

Letakkan kode dibawah ini setelah kode nomer 3 diatas.

<!-- 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-->

Selamat mencoba.