Related Posts Widget For Blogger Based Blogs

The related posts widget shows an advance related posts section beneath our post page.The related posts are taken from the same label of the current post.

At first

Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For below code:-

</head>

and replace with

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#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/AVvXsEhkMiYOBLxMdvB5ZXUSp1jOK71HR2z5UguWA9JadldfHeHHEiLO9DO8bafoBUHFMknUw-AiVL3wFMpJjnc_6QPAdT37JVz_qstiHCpZUESZ_JAlRMsj8KERH-KLh6TJoben-uT8_a9ywqI/s200/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="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->
</head>

Now find

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

OR

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

If nothing appears ONLY then find this

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

OK Now place following code Below any one of above lines.

<!-- Related Posts 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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://teckzest.blogspot.com/2009/08/related-posts-widget-for-blogger-based.html' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End-->

Now Save your template