Related Posts with thumbnails for blogger

Simple related posts gadget is replaced by this new 'Related Posts with thumnails'. It has a feature of displaying the thumbnails of images from the posts and attracts the users which results in increase of page views per user. This gadget is created by BloggerPlugins and is listed here.

Similar gadget is also available from Linkwithin and is very simple to install in your blog. Finally, this gadget helps in retrieving all your stories from Blog Archieve.

To add this gadget to your blog go to > Layout > Edit HTML and search for </head> and add the below code above this tag.

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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>

Now search for <div class='post-footer-line post-footer-line-1'> and add the below code after this tag.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" data:label.name "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Related Posts";removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>