Free Blogger Related Posts Widget

Free Blogger Related Post Widget

This time we will share a free blogger tips and tricks or perhaps more accurately is a very helpful tool in managing your blogspot. This is wonderful hack for displaying links to related posts beneath each of your blog posts. Related articles selected from other posts in the same category / label / tag. With this wonderful hack a lot of readers will stay on your site for longer periods of time when they see the related posts. This widget also helps in seo on page for your blog.

Here is How to Add Blogger Related Posts Widget to Your Blog?

1). Go to Layout >Edit HTML in your Blogger Dashboard and back up your existing Template before you making any changes!

2). Make sure to check the "Expand Widget Templates" box.

3). Search for the </head> tag. and add the following code just before the </head> tag.

<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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOocSUGoE7ZiM226dhOk0hjxyzr1QBhJYbOQsXx5lisvGELzftnrtocdI8PljVstD_UE5jOGBhHaN97PsNr-umNQ2A-KMLwUDpJf7oRZY_nzuyCQfGqWRvOPXyVlgN8Hg73H7b-n-LNuh4/s1600/blogger-chair-rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://blogger-hair-project.googlecode.com/files/related-post-blogger.js' type='text/javascript'/>

Note: see the color red above, you can change the page width size according to your blog.

4). Search for <data:post.body/> and add the following code just beneath the <data:post.body/>. If the template you have used the automatic readmore, then make sure the code below mounted just below the second <data:post.body/>.

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

Note: see the blue above, you can replace it according to the number of related posts you want to display.

5). Save the template, and you are done.

If the installation of the code is correct, then the list of related posts will look like on the bottom of this article.