This widgets really helps you in keeping the visitor’s interest in your blog. A reader finds this widgets when he reaches the end of an article.

Related posts widgets shows all the posts related to the article currently being read. It actually fetches and shows all other posts with the same label with which current post is labeled.

< imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

To see a demo, scroll down below this post, to view “Related Articles”.

To install this in your blogger blog, follow the steps:

1. Goto Layout > EDIT HTML

2. Find </head> and just ABOVE that paste the code:

<!--Related Posts Scripts and Styles Start-->
<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(&quot;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png&quot;) 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://sites.google.com/site/tipsotrickscom/uploads/Related_Posts.js' type='text/javascript'/>

<!-- Related Post script END -->


3. Now, search for

<data:post.body/>

And just AFTER this, paste this code:

<!--Related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Articles: </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=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related posts ends-->

If you want to change the title then change the text in red.

Number in green is the number of posts this hack can show. You can increase/decrease the number of posts according to your need.

4. Save the template and view any post.

Have something to say? Leave your comments below