Related Posts Widget for Blogger Blog

If you are using the standard blogger approach, your posts are structured through time related logical way. You post new publications, and they appear in the blog history widget. Only for the explicit cases, when your reader is stunned and mesmerized by the publication he came to see through the referral site or search engine, he will dig more, exploring other publications on your blog. Other than that, he will go further, in the best case, leaving a comment. How can you keep him longer? How can you present other beautiful posts, he might find interesting? In one of the previous posts Rotating Post Widget for Blogger Blog I have already presented a way to show something extra to the reader. However, while doing what it is supposed to do, the presented widget does not show the particular articles that are relevant to the blog post your reader came to see. Therefore, embedding the Relevant Articles Widget for Blogger might represent a better solution.


The relevance of the posts is based on the tags or labels, assigned to each of the posts on your blog.

The Widget can be embedded in 9 steps:
1. Go to Layout >Edit HTML in your Blogger Dashboard.

2. Back up your existing Template before making any changes! Export your template to the safe, easy identifiable location.

3. Check the "Expand Widget Templates" box.

4. Search for the </head> tag.

5. 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 {
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://i299.photobucket.com/albums/mm297/zozuglogger/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://torrentmoon.com/javascripts/Related_posts_hack.js' type='text/javascript'/>

6. Now search for <p><data:post.body/></p>

7. Add the following code just beneath the code you just searched for.

<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>

8. The default number of the posts is 5 in the code, but at this step you can modify it as per your needs, changing the number in the following line: max-results=5

9. Now Save your Template and you're done!

The credit for the gadget development goes to the Widgets4Free blog.