Add Related Posts or Articles Widget in Blogger / Blogspot Blogs

Related Posts Widget help visitors to find related articles on your blog. Many of your readers will remain longer periods of time when they see related posts of their interest. This Blogger hack is also useful tool to make your blog more professional. Related Posts are selected according to your categories, labels or tags that you add to your post. Now here is the Blogger tips or hacks on displaying related posts or articles under each post. To add this widget you need to know how to edit HTML code in Blogger. Here is the step by step insturctions to add related posts to your blog.

Add Related Posts Widget in Blogger Blog :

1. Go to Blogger Dashboard - click Edit Layout - then click Edit HTML. Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window

2. Now click on Expand Widget Templates checkbox.

3. Add the following code below ]]></b:skin>,thats between ]]></b:skin> and </head>

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

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

5. Add the following code just below the above tag .

<p><data:post.body/></p> tag.

Your code here

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

6. In order to change the maximum number of related posts being displayed, just find the "max-results=5 "in above code (Step 5). Change 5 with your preferable number.

7. Now save your template.

That's it. Now you can see Related Posts or Articles under each post. If you face any problem implementing this Related Posts code in your blog, just keep a comment here. I will happy to help you.