Add Related Post/Articles Widget To Your Blogger Blog

This is a must have widget for all bloggers, with this widget on your blog, it will make readers to spent more time on your blog when they see related articles of interest. the related post widget will show articles having the same label.




How to add related post widget 

Login to your blogger dashboard
Go to "Design" > "Edit HTML" > Back up your template
Mark/Tick "Expand Widget Template" 
Use ctrl F to find </head>
Replace it with the code below

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrIzEOrcqk-t8pXr4ESw1w4jXTUSh_EQGrLUxbnhsSKIdU8fE3vr9njv4obOo2Hn17-TpcCVE_144wE5dFGIAnInq_QH2_7QFJbWblsSinbNyGoj15ZIC8KZfwmN8A8fMFN6e7p3Rimo/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://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>

Find the next code below

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

If you are unable to find the above code, then find the one below

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

Place the code below immediately After/Before any of the code you find

<!-- Related Posts Code Start-->

<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://www.realcombiz.com/2012/05/add-related-postarticles-widget-to-your.html'><img style="border: 0" alt="Get Related Posts Widget for your Blog" src="http://image.realcombiz.com/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!-- Related Posts Code End-->

To change the title of your widget edit the line code below in the first box.

var relatedpoststitle="Related Posts";

To change the number of related post you want to show under each post, edit the code below in the forth box.

var maxresults=5;

Click "SAVE TEMPLATE"
Then you are done. check how to add related post with thumbnails below each post
Note that this can only show related post of a post with thesame label, you have to click on a post having a label before you can see the post related to it. 

Posted in: Blogger Widgets