Related Post Thumbnails

This article explains about how to make Related Post with Picture Thumbnails style. (Credit to Aneesh)

The demo of this hack is installed in this site... Please see below this article

STEP BY STEP TO INSTALL THIS TRICK

1. Sign In To Blogger
2. Go to LAYOUT -- Edit HTML -- Checked the box, expand widget templates
3. Find this

</head>

4. After that, Replace that code with this :

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

5. Find this :

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

If you did not find it, please find this code :

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

6. Copy paste the code, below, under <p class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-1'>

<!-- 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.cahayabiru.com/2009/10/related-post-thumbnails.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.cahayabiru.com/' style='display:none;'>Blogger Templates</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Save Your Templates

NOTE :
After you save your templates, you may adjust how many thumbnail link will be shown to your reader. Please find this :

var maxresults=5;

The Number "5" is relating with how many relating post will be seen to your readers. You could change the number with any number that you want.

You could change the Title also. Please, find this:

var relatedpoststitle="Related Posts";

The words "Related Posts" is relating with the title. Please do not delete the quote symbol. You may delete only the word -- Related Posts

Ok, Everything is done. If you like my works and articles, you could subscribe in my feed form in right sidebar of this site.
Ok, Have a nice blogging.... :)