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.
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tIAGC-93A_Cvu4eGAjjhvd4j1L4SUwi4qLJo0e6kBceiP3vCBxgPJYFjtakbkXqfvOZMTcVGRy2c4aYdD0XL95O_yJJnp9sob7lnvSCSK1lEFx7fG1Sh4QNW7tByn3zgmiI6w-pdniM/s200/greentickbullet.png") 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 == "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><!--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.
