Simple related posts widget for blogger

Wednesday, December 16, 2009


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.

Subscribe to our blog

Do you have any Suggestions, add your comment. Please don't Spam!
If you like this site >> Subscribe to our feed

1 comments:

Essence Eco January 31, 2014 at 10:07 PM said...

Free Premium Wordpress/Blogspot Theme Download I like the helpful information you provide in your articles. I will bookmark your blog and check again here regularly. FREE iPhone Unlock/Jailbreak No Cost !!
I'm quite certain I'll learn lots of new stuff right here! Best of luck for the next!
Free Call & SMS whole world with VoIP Technology

Post a Comment