How to Add Related Posts with Thumbnail in Blogger

Previously, I've posted about How To Make Related Article In Blog. Now, I will post about How to Add Related Posts with Thumbnail. If you don't know what is related posts with thumbnail, you can see under Blogger Section. There are some posts title with thumbnail (reduced-size versions of pictures). The function of related posts is to increase our blog pageviews. Interested? Just follow the steps below.

1. Log in to your blogger account.
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Copy the code below, and paste above </head>

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

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

5.  Then find this code

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

But, if you didn't find that code, try to find the code below

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

6. After that copy the code below, and paste under one of the code above

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

Customize :
var maxresults=5; is the maximum result of the related posts that shown in every post
var relatedpoststitle="Related Posts"; is the title of the related posts

7. If you've finished with your settings, just click Save Template