Related Post Widget

There are a several ways to promotion our blog to public, but i classify it into two class, external promotion and internal promotion. External promotion is like register our blog to search engine, blog directory, social bookmarking web, twitter, forum and use advertise our blog. The second thing is internal promotion. What is internal promotion? Internal promotion is the ways to promotion our blog with optimization our blog, like use navigation bar, drop down archieve menu, and related posts widget. With that tools, a visitors can be easy to explore our blog. In this post, i would to explain how to make Related Posts Widget for our blog.
I think everybody was know what the meaning of related posts. Related posts is another post that have similar topic or content to the articles that are read by visitor. For example it's look like this one.

To install this widget, we must do some thing with our template. 1. Login to your blogger account.
2. Go to your template layout.
3. Go to "Edit HTML".
4. Click the "Expand Widget Templates" option.
5. Insert this code into your template above </head> code.

<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://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") 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 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>

you can adjust the width of the widgets according to the needs or circumstances template or template condition. 6. Now search this text

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

Now replace the above text with this code

<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:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </b:if> </b:loop>

7. Now scroll down still you can find ending tag for either or . Now paste the following script below the ending div / span tag.

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <h2>Other Recommended Posts</h2> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

8. Save your template.
9. Look up the result, and now you have Related Posts Widget.

And the last, i want to thank for mohamed rias for the tutorial.
Hope this useful for use. Best Regard One-4-All