CREATE RELATED POSTS WIDGET FOR BLOGGER

We try to improve the site content to attract more and more the visitors who usually refer the latest posts on your frontpage to your blog.

And how should they explore more pages for their favourites ?! Creating a “Recommended posts” or “Always top posts” could be the great way keep the visitors staying at your site longer. For this purpose, you could add more useful hacks then the visitors could explore more details right at the post they are reading. The best choice in this case is Related posts Widget for Blogger.

This is a great hack which also improves your CTR in your blog and hence improve your blog traffic. Plus it also provides better navigation options for your visitors.

Please follow the below simple steps.

- Login to your Blogger account and go to Template --> Edit HTML. Note that Expand Widget Templates box CHECKED.

- Find the </head> tag and add all of this code just right before it. Then Save !


<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("http://i383.photobucket.com/albums/oo273/mondey/weed-bullet.gif") 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://hatfashion.110mb.com/RelatedPosts.js' type='text/javascript'/>

Now look for <p><data:post.body/></p> in your source code. Add the below code right after <p><data:post.body/></p>



<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 != &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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>


Save your Template . All done.
Have enjoy !!

Credits : Thanks so much Debajyoti Das for sharing this great tips !