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

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

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

<b:if cond='data:blog.pageType == "item"'>
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</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.