How to add a Related Post Widget for your Blogger Blog

by Rajib Kumar

Related post widget is a very important tool for a blog that allow your visitors to navigate through similar posts from your blog. This will help you to reduce the bounce rate of your blog.

Related Post Widget for Blogger blog

Related Post Widget for Blogger blog

To add the related posts widget in your blogger blog you will have to follow the following two simple replacement steps.

1. Firstly LogIn to your blogger account
2. From the Dashboard of your account go Design > Edit HTML and click on “Expand Widget Templates”
3. Now by pressing F3, search

</head>

4. Just before paste the following codes

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

5. Now search the following line

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

6. After the above line paste the following codes

<!-- Related Posts Code Start-->

<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>

<!-- Related Posts Code End-->

7. Now, save your changes.

I hope you will like this. If you have your own designed related posts widget, then share it to us in comment section. You also can share it to our facebook fan page.

  • Related posts widget wordpress
  • Related posts widget for blogger
None found.
1 Rizky2009 February 21, 2011 at 1:52 pm

cool friends, I also have my blog post, hi, I'm blogger from Indonesia, all I follow, in wait for the comments and follow behind it if it pleased

2 Rajib Kumar @ How to Blog February 21, 2011 at 5:38 pm

Hey Rizky, nice to meet you. I visit your blog. Thanks for your comment. I also follow your blog.

3 Admin August 4, 2011 at 11:30 pm

Could Not Find the Second Code

4 Kaustav Banerjee August 27, 2013 at 2:16 pm

Hey, Nice article.

I have tried adding widgets and succeeded fro the general ones. Never had an idea that we could add this type of widgets too. Well, I’ll try adding one in my Blogger profile.

Good article. Good job

Comments on this entry are closed.




Previous post:

Next post:

. Border