How To Add Related Posts Widget In Blogger

Adding related posts widget at the footer of the Blogger article is the smart way to improve your traffic. This widget offers your reader a readymade list of the article which is important for your reader. Related posts widget will appear at the bottom of the article so it will help you to keep your reader for long time on your blog. And it will also improve your page views. Just follow the simple step to add related posts widget in to your blogger blog. 

Installing related posts widget:

1. Login into your blogger blog.

2. Go to template. 

3. Click on edit html.

4. Now click on Expand widget templates 

5. Now search for </head> ( use ctrl+f to search ) and paste the bellow code above/before it.

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; 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: bold; 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(&quot;http://www.webaholic.co.in/other/bw.png&quot;) 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/05512524159/rposts.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

5. Now search for <data:post.body/> ( use ctrl+f to search )and paste bellow code after/bellow it.
( If you are using magazine type blogger template then there are more then one post.body find the correct post.body )

<!--Related Post Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<!--Related Post Widget Ends-->

6. Now just save your blogger template and you have done.