Add a Related Posts Widget to your Blogger blog in 7 easy steps

In this post, I will show how to add a simple Related Posts widget for blogger blog. To implement this you have to make some changes to your blog's HTML codings.

Step 1 :  Go to your Blogger Account.

Step 2 : Template --> Save a copy of your Template before doing anything

Step 3 : Edit HTML --> Expand Widget Templates

Step 4 : Find </head> by using Ctrl + F and paste the following code just before </head>.

#related-posts{float:left;width:100%;border-bottom:1px solid #aaa;margin:5px 0;padding:5px 0}
#related-posts .widget{margin:0;padding:0}
#related-posts .widget h2,#related-posts h2{font-family:Arial,sans-serif;font-weight:nomal;font-size:15px;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#003366;font-family:Cambria;font-weight:400;font-size:13px}
#related-posts li{line-height:1.6em;border-top:1px solid #eee;margin:0 0 0 -20px;padding:2px 0}
#related-posts a:hover{color:#336600;text-decoration:none;}  

<script type='text/javascript'>
var relatedpoststitle=&quot;&quot;;
</script>
<script src='https://dl.dropbox.com/s/2vvrpzbq6r03nq0/lh.js' type='text/javascript'/>

Step 5 : If you want to display the related posts widget in the footer of your blog then look for a code like this.

                  <div class='post-footer-line post-footer-line-1'/>

Step 6 : After you have found this line, just copy the following code below that line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='calibri' size='3'><b>Related Posts :</b></font>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if> 

Step 7 : Then save your template and open a post to see the effect. The related posts widget will only be shown in the post pages and not the home page.

Your related posts will look something like this. 

Leave a comment with your blog address if you have any difficulty.

Top