Add Related Posts or Articles Widget | Blogger Tips

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 be happy to help you.

Comments Post a Comment

Tarun - June 25, 2009

Nice article and information. Actually I was serching for this post since long back and today I found. It's great but only some times it shows related post and some times not. Can you through the lite on this issue?

learn about blog for beginners - July 12, 2009

Great info for beginners...thanks for sharing with us.

Indonesian Heartthrob - July 29, 2009

I cannot find "data:post.body" tag

Russel - August 03, 2009

@Indonesian Heartthrob,
Try again carefully.If you still stuck put your blog URL here. I will help you to find out "data:post.body" tag.

Venom - January 04, 2010

after using the script given at step 5 i got the following error message---

The reference to the entity "callback" must end with the ';' delimiter.

so plz help ...

Venom - January 04, 2010

now i corrected the error in that code that i mentioned but now the problm is this code isnt functioning in my blog... :( now help me with this ...

Anonymous - July 03, 2010

Nice post. I have added the widget to my blog.
Thanks
Earn money from blog...http://earnmoneyfrombloginfo.blogspot.com/

xixerone - September 28, 2010

Hey, thanks for the post, but I have a custom template and can't find the "data:post.body" in my HTML

the URL is www.xixerone.com

can you help me out?

Leave a Comment