How to add related posts below/after every post in Blogger

Do you want to add Related posts/Similar posts widget below every post on your blog?
Lets do this :

Although you do not have to use this file as I have already linked the file in STEP #5. So, store this file as a back up on your PC.

1. Go to Blogger.com
2. Now go to "Template" then to "Edit HTML" section
3. Back up your present template.
4. Now click on "Expand widget templates".
5. Find this code:

]]></b:skin>

Paste BEFORE/ABOVE this code:

<!-- Related Post css -->
<!--start related posts css Info : http://www.allhelpz.blogspot.com-->

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

<!--end related posts css.Info : http://www.allhelpz.blogspot.com-->

6. Now search for this code line:

 <div class='post-footer'>

And after that line, paste this code:

<!--start related posts code Info : http://www.allhelpz.blogspot.com-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Posts:</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2s1GFfPjdUP1TeeIuiW7yYr_kw0a8CfuyYeZurGZsv7DohugU_mBPHLeXME6RIHSPYRdOqp4R1A4bKf-4vkgbBt1DHvanxDu1YUfq1SkNaCr0Hdrl92yfJTsYQSLR1rGkLWKPgGiV_U/s1600/no-image.gif&quot;;
var maxresults=5;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<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=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>

</b:if>
<div style='clear:both'/>
<br/>
<!--end related posts code Info : http://www.allhelpz.blogspot.com-->

To change the number of similar/related posts to be displayed, change the code max-results=6
Now save your template.
*(Remember to add labels after your posts, during publishing them)

[Please comment for any Problem]