How to Add Related Posts Below Every Post on Blogger

Recently, a post was shared on how to Add Related Post Widget with Thumbnails to Blogger, but unfortunately, our readers kept demanding for the type of related post widget that is being used on this blog (i.e. related post widget in list format without thumbnails). So today, I want to share how I was able to add a related post widget beneath every post on this blog.

Related post widget shows the list of post related to posts with the same labels, and this has increase our blog page views and decrease in blog bounce rate. Apart from these two, related post widget is a good SEO practice. Related post widget is a good widget every bloggers must have on their blog.

Before I share the method I use in adding the related post widget beneath every post on my blog, I want to share how it has helped

How to Add Related Posts Below Your Blog Posts

1. Log in to your Blogger Dashboard and Navigate to Template ==> Edit HTML and checked the Expand Widget Templates Check box. Then use (CTRL+F) to search for </head> tag in your templates.
2. Add the code below just Before/Above the closing </head> tag.

<!--JustNaira-Related-Posts-Starts-->
<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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BXcfx71c5-R8Selj_2JhZouk4ps-8jqUTtLHkgU9BG3I0wO6xaqgm0TCYjuZTxQDypEvvd6v7jKjLgKRJH7CYBbTBEMQpQE4nU926ydeTIjcwFeKltnee2YKUZp2D_db9Ie3q6SN2bs/s200/greentickbullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
 </style>
<script src='http://justnaira-css-js.googlecode.com/svn/related-post.js' type='text/javascript'/><!--JustNaira-Related-Posts-Stops-->

3. Now search for this code line:

<data:post.body/>

4. And after that line, paste this code:

<!--JUSTNAIRA-RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

<!--JUSTNAIRA-RELATED-POSTS-STOPS-->

5. Note: In case you have use the Auto Read More Hack on you blog and you have more than one

<data:post.body/> in your blog template, search for any of the code below and then past the code in step 4 above after it.

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

or

<div class='footer'>  

6. Save your template.

Related Post Widget Configuration

To change the total no of posts displayed beneath your blog posts, Edit

max-results=5

to the actual number of related post you want to see at the end of each post on your blog.

Finally, after implementing this widget on your blog, if you fail to add label to your posts during publication, nothing will show up in the related post section. So always make it a point of duty to label your blog posts.