How to Add Related Post Widget to Your Blogger Blogspot Blog Posts

One way to make your readers feel convenient with your blog is to install related post widget. Related post will shows underneath your current full post with other posts that have the same label or category. So if you have many posts with the same category, chances are high for your readers to read some of those related posts. Remember that there is no other way to find related posts, unless readers click each category having some posts in it, which is may not be so convenient way for them. It is better to show them directly all other related posts under the current post they are reading. This is the job of related post widget.

See the image on the left to have a feel how this related post widget in action. This image is taken from a post of a blog implementing this related widget.

Follow this simple step to install the related post to your Blogger Blogspot blogs:

1. Log in to your dashboard
2. Select Design and HTML
3. Back up your template by clicking Download Full Template (in case something funny happens or you change your mind)
4. Select the box next to Expand Widget Template
5. Search for </head> code
6. Place the following code just underneath the </head> code

<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/AVvXsEjjFoVuW1aEw86iCgFTRpcBjpxqM67bnX65L46XTYcBYpcSY3JeoEiaCF3opwrbdB8ywy-iB8XC2IDYUE71E87hUAyJqhRobpIVCV6ItFy2BEhYE643V6esuU7_X2vtVItCziRyVc1dOFM/") 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'/>

7. Search for any of these code present in your template:  <data:post.body/> or <div class='post-body> or <data:post.body/>
8. Add the following code beneath whichever the code in #7 you find

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

9. Save you template. Preview the related post in action by selecting one post in a category or label having other posts.