How to Add related posts widget with Thumbnail New!!! Latest 2012

 

Advantage of having related posts widget is that, Suppose any user is reading one of your blog post and seeking for some information. After finishing of reading he might be impressed with your post and want to visit another, then this widget is easiest way for surfing through related posts. Thus Number of page visits will be increased and as well your traffic bounce ratio will be decreased gradually.

Steps to Add Related Posts Widget with Thumbnail in Blogger 

 

Note: Before making any changes to your template, take a full backupof your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.

#Step 2. Find(Ctrl+F) 

 </head> and 

replace it with this code:

<!--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, “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://sites.google.com/site/besthowtoblogger/blogspot/relatedPostWiththumbs.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>

#Step 3. 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'> 

Put the code given below immediately after the above one.

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

#Step 4. You can adjust the maximum number of related posts being displayed by editing this line in the code:

var maxresults=5;

To edit the title of the widget you can change this line of code: 

var relatedpoststitle="Related Posts"; 

#Step 5. Save template and done!.

Update: it is possible to make the thumbnail larger:
- Find ]]></b:skin> code in your blog and put below css code just before that.

#related-posts img { 
height:150px !important;
width:150px !important;
}

Done :)