To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.
For displaying the thumbnails you need not to worry about anything, this thing is taken care by the widget automatically, but you must have at-least one image in the post.
Follow the steps to display Related Posts Widget in Blogger With Thumbnails.
Step 1: First Login to your blogger dashboard and navigate to Layout > Edit HTML and check the “Expand Widget Templates” checkbox.
Step 2: Find the
</head>
Step 3: Replace it with
<!–Related Posts with thumbnails Scripts and Styles Start–>
<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>
<!–Related Posts with thumbnails Scripts and Styles End–>
</head>
Step 4: Find the either line given below
<div class=’post-footer-line post-footer-line-1′>
OR
<p class=’post-footer-line post-footer-line-1′>
Step 5: Put the code given below immediately after the above one.
<!– Related Posts with Thumbnails Code Start–>
<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>
<!– Related Posts with Thumbnails Code End–>
Now Save Template and View your blog you will find Results, if you don’t see the images then keep patient it will show you withing 24 Hours.
Note: You can adjust the maximum number of related posts being displayed by editing this line in the code.
5.To edit the title of the widget you can change this line of code:
If you have any issue please comment here.
A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a 
