Great Related Posts Widget for Blogger – Easy to Install

In this post I am going to show you a wonderful hack for displaying links to related posts/articles beneath each of your Blogger blog posts. The related articles are chosen from other posts in the same category/label/tag. With this hack a lot of your readers will remain on your site for longer periods of time when they come across related posts of interest.

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. You might want to back up your existing template before making any changes.

3. Check the „Expand Widget Templates“ box.

4. Search for (Ctrl + F) the </head> tag.

5. Add the following code just before the </head> tag.

6. Now search for <data:post.body/>. In some templates this code may look like this:

<div class='post-body>

<data:post.body/>

7. Add the following code just below said line of code.

<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

8. Save your template.

That´s all!

Customization

In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number „5" to the desired number.

max-results=5

Good luck!