Relates Posts Widget For Blogger

Now i'd like to talk about Related Posts Widget For Blogger. This widge will load related posts to show below every post in your blog. To know how will it look like, you can check related post widget exists on this page, Just scrool down your mouse.

Actually i have two scripts to show related posts on blogger, but for now i'll share only for the one.

Well, let's go down to the bussiness

1. Find the closing tag </head> in your template and put the following code above it:

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

2. Find the following script:

<b:if cond='data:post.la bels'><data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel=' tag'><data:label.name/></a><b:if cond='data:label.isLast! = "true"'>,</b:if> </b:loop> </b:if> </font>

First, try to search for data:post.labels

3. Replace the above script with the following:

<b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><br/><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if><br/><br/> <b:if cond='data:blog.pageType == &quot;item&quot;'><font color='90F000' size='5'>Related Posts</font><br/><br/> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><br /> </b:if><br />

5. Save your template and you're done.