How to Add Related Posts Widget for Blogger within 5 Minutes

Here I want to show you how to add related posts widget for blogger. Related posts widget is really an important widget for all the bloggers. It helps both the bloggers and the readers. When readers visit your site for solving one problem and then if they find another related post they must stay your site long time. It will help you to increase your page views.

Related posts widget is really an effective widget to reduce bounce rate of your blog. You must add related posts widget to your blog because it is the search engines friendly widget. The related posts widget also increase your page rank. So add related posts widget in your blog as soon as possible.

Related posts widget is a common widget for all the bloggers, this widget helps you to improve internal linking, it also improves readers interaction. So without any delay add related posts widget. Don't worry it is really easy to add and in this post, I show you how to add related posts widget easily.

Now follow my steps to add related posts widget in your blog.


related posts widget

How to Add Related Posts Widget for Blogger


Step1: Log in to your blogger Dashboard then click on Template >>>>> Edit HTML. Now press Ctrl+F and then find the </head> tag.

related posts widget



Step2: Now copy the below code and then paste this code just above or before </head> tag.

(Start Here)

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
    margin: 10px 5px;
padding:5px 5px;
}
#related-posts h2 {
    font-size: 18px;
    color: black;
    margin-bottom: 15px;
}
#related-posts a {
    font-size: 14px;
    color: #999;
    text-transform: capitalize;
}
#related-posts a:hover {
    text-decoration: underline;
    color: #555;
}
#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 5px;
}
#related-posts ul {
    list-style-type: none;
    background: #e9e9e9;
    border-left: 6px solid #e2e2e2;
}
#related-posts li {
    padding: 12px;
     border-bottom: 2px dotted #E2E2E2;
}
#related-posts li:hover {
    background: #F4F4F4;
font-weight:bold;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://googledrive.com/host/0B-GuAkK2nj5gZy1qTE0yMk5Fcmc' type='text/javascript'/>
</b:if>

(End Here)

Step3: Now find any of the below code from Edit HTML


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


Step4: Now copy the below code and paste the code just after any of the above line (Any of these you found).

(Start Here)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://allblogsolution.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>   

(End Here)


  1. You can change the value 5 from var maxresults=5 with the number of posts you want to be displayed.



  Step5: Now click on Save Template.

That's all friends, hope you able to add related posts widget in your blog.Here I have shown you how to add related posts widget without thumbnails. Thanks for with me. If you face any problem please comment me on below.

2 comments

I’ve been surfing online more than 5 hours today, yet I never found any interesting article like yours without a doubt. It’s pretty worth enough for me. Thanks... article backlinks