How To Add Related Post Widget To Blogger

As you may have noticed most if not all Blogs have the related post widget.  Even if he blogs on the Blogger or WordPress platform. Having a related post widget for your blog helps keeps readers longer on your blog it also reduces your blog’s bounce rate and a higher page view.  Without wasting much of your valuable time I will show you how to add the related post widget to your  blogger Blog.But before we proceed i will advice you to back up your blogger template. Done that? Good, now we can proceed.

Recommended : How to Change the ‘No Comment’ Tag in Blogger

Now go to Dashboard=>Template=>Edit HTML search for this code using CTRL+F 

 </head>

Now just Above it paste the below code.

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->
<!--Remove--><b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<a href="http://24work.blogspot.com" target="_blank"
title="Blogger Widgets"><img
src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"
border="0" alt="Blogger Widgets" style="position:absolute; top:
0px; right: 0px;" /></a><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, &#8220;Times New Roman&#8221;, 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://safir85.ucoz.com/24work-blogspot/related-posts/
related-posts-for-blogger-24work.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->

To change the title i.e. ‘Related Post’ to any phrase you like then edit this code

var relatedpoststitle="Related Posts";

Now find this code

Now immediately after/below this line paste the following code

<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><a href='http://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyFOT4CmhI/AAAAAAAAADM/MvlLp1fyfoM/s1600/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;
<data:post.url/>
&quot;);
</script>
</div>
<a href='http://www.yunggenius.com/2013/04/add-related-post-widget-to-blogger-blog.html'>[Get This]</a>
<!--Remove--></b:if>
<!-- Related Posts Code www.bdlab.blogspot.com End-->

Now to increase the maximum number of post to be displayed which by default is ’5′ change this code
var maxresults=5;

Now click on save template!

Faced any difficulties when adding this widget? It’s normal just use the comment box and get a reply ASAP

Like this post? Why not share it to someone out there using the share buttons below!

Happy Blogging!!

Leave a Reply

Your email address will not be published. Required fields are marked *