Best related posts widget for blogger

Related Posts Widget for Blogger,add Widget wonderful for displaying links to related posts beneath each of your blog posts.

To implement the related posts widget you will have to follow 2 simple replacement steps.

 How to Add Related Posts Widget to Your Blog?

1. Go to Template >Edit HTML in your Blogger Dashboard.
   
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Now find this line of code

</head>

• and replace it with

 <!--Related Posts Scripts and Styles Start-->
<!--Remove--><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 .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHHkx_qIQKfmyH5VZ87Uyc55beRZ1vRH7fWLvXVdRH5GJ3eImxvfM03bWVqFnnPiZU98kFxxpMcDaKsh2ZLDUeD7ac50nZ5VTU7CuGJPyVVqp_5XPqo1EZquMmAw49DuISl_eo4AEDf4/s1600/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://bloggertofree.googlecode.com/svn/trunk/related_posts_min.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>

 to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

5.Now find this line of code

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one



<p class='post-footer-line post-footer-line-1'>

 6.Now immediately after any of these lines(whichever you could find) place this code snippet

 

<!-- Related Posts Code Start-->

<!--Remove--><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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

 Number of related posts that are displayed..

var maxresults=5;

Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with This code, which in blue  <!--Remove—> 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 </b:if>
If you have any questions regarding the implementation of this Widget to your own blog, shoot me a comment and I will be happy to help!