Simple related posts widget for blogger 1 Comments

After adding social bookmark icons below your posts the next importance goes to related posts in which the posts related to the label are published below each post. This is also called 'Similar Posts' widget for blogger. By adding this you can make the user stay on your blog. Any number of posts can be shown from the related labels.

To add this for your blog, search for  ]]></b:skin>   by pressing Ctrl + F and add the below code before this tag.

#related {
font:Arial;
font-size:14px;
font-weight:bold;
line-height:18px;
}
#related ul {
list-style-type:none;
margin-left:15px;
padding:0;
}
#related li a:link, #related li a:visited, #related li a:active {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:#fff none repeat scroll 0 0 !important;
border-color:#f2f2f2;
border-style:solid;
border-width:1px 2px 1px 27px;
display:block;
padding:5px 0 5px 10px;
}
#related li a:hover {
border-color:#909090;
border-style:solid;
border-width:1px 2px 1px 27px;
display:block;
padding:5px 0 5px 10px;
text-decoration:none;
}

This code can be modified to fit the colors of your blog.

You have to add a script to make this widget work, to add script search for  </head>  and add below code before this tag.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i  ) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k  ) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum  ;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i  ) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length  = 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length  = 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j  ) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="'   relatedUrls[r]   '">'   relatedTitles[r]   '</a></li>');
if (r < relatedTitles.length - 1) {
r  ;
} else {
r = 0;
}
i  ;
}
document.write('</ul>');
}
//]]>
</script>

 Now search for  <data:post.body/>   and add the below code after this tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related'>
<h2>Related Posts</h2>
<b:loop values='data:post.labels' var='label'>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

This will work for sure and to change number of posts to be displayed change max-results=5 to your required value.