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.

Rleated-Post-Widget-For-Bloggers

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 JustNaira.com. 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.

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;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/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.

<p class='post-footer-line post-footer-line-1'>

or

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

That’s all folks.


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook16Tweet about this on Twitter3Share on Google+2Pin on Pinterest0Share on StumbleUpon1Digg this

Comments

  1. You’ve got great articles on your site. I really appreciate.

    Keep the great work going. Thanks

  2. Adesanmi Adedotun says:

    Thanks for sharing

  3. i am not being able to copy the code. please help

  4. thank you bro, it helps me !

  5. @Rakesh Rajbhar, change that in the css code.

  6. Rakesh Rajbhar says:

    I don’t wana use green bullet….i would like numbering…could u help me out

  7. Thnx for this nyc post….I was looking for This!

  8. thank bro, u hv bn of great help to me n i believe it is so 4 everyone who has viewed ur posts. Keep it up.

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*