How to Related Posts Widget for Blogger / Blogspot

            
Step1.Log in you Blogger account and click  Backup/Restore then Download Full Template.
(This is Backup your existing Template before making any changes!)

Step2. Log in you Blogger account and go to Template and Edit HTML as Given below..
                   Step3. Click Inside code area and press Ctrl+f Keys..

Step4. Search for the </head> tag.

Step5. Add the following code just before the </head> tag.


<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:90px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Customization:
If you want to change width and height of  thumbnails, change value of Blue Color 100px and 90px.
If you want to change size of the Releted post tittle, change value of green color 110px.

Step6. Find the line [<div class='post-footer'>]  in code area ( you may find two times but don't forward to second one)

Step7. Above this code  [<div class='post-footer'>] , paste the code given below.

<!-- 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>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->     

Customization:
 If you want see Related post more then 5, change  this value. max-results=5. 

Step8. click save Template. Now Related post widget will appear below of  each post
               
                                   Enjoy Related post widget to your Blog