Related Post Widget For Blogger/Blogspot : For All Posts

Now here is wonderful widget for displaying links to related posts below each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this widget many of your readers will remain on your site for longer periods of time when they see related posts of interest.It is very bueatiful widget developed my me which also increases the bueaty of your posts. Installation is very easy just follow my steps to install it.

How to Add Related Posts Widget to Your Blog/Blogspot ?

1) Go to Layout >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) Search for the </head> tag.
5) Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRWR2J2Mxxyzdun1iuo32QrebPfIGMnOUgNbEDP-uF0-p3uPhFPdUH79JmxSBhERWN1NOMvZej_Rg-FMLtStO34eFvwrEd-iECWZmHzyGxJczSzHFQCvdh_8nA6hio6RpzI1mf1vGIVY/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/10121340032/btsnts_related_posts.js' type='text/javascript'/>

6)Now search for <data:post.body/> In some of the templates this code may look like this
<div class='post-body>
7) Add the following code just below/after <div class='post-body>

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

8) Now save your template.


Custmization - 
In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.

max-results=5