Add a Related Post widget after every post in Blogger

It is very important to keep your visitors stick with your blog as long as possible. The related post option is such a way to keep your visitors busy.

The related posts widget will show a new related posts section below your post.The related posts widget fetches the related posts from those posts having the same label as the current post.

To apply the related posts widget you will have to follow these simple steps.

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/AVvXsEg74TpRsAXqPp2n1W0T36koNR40WBGjV-sW7_3OmJodlrCYUEKu0eklM_6YsBpEgccxK5wkyGnDAxgQJMUhVR822TvySD1Fy8tCoc37k__KiFRsKmbxxgpbqoCLyUhyphenhyphenKaHHUBLQlCm3m10/") 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://theblogtemplates.com/scripts/Related_posts_hack.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>
   or
   <data:post.body/>
7. Add the following code just beneath the code you just searched for.
   

   <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.

All done! I think now you should have a related posts widget on your blog.

***The codes are well commented .So this can be easily removed whenever you want..

Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove-->

Posted in: blogger,website,widget