Blogger Help – How to add related posts below every post

To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:

First of all download this file:
relatedPosts_ForBlogger2.js

Zipped File

Although you do not have to use this file as I have already linked the file in STEP #5. So, store this file as a back up on your PC.

1. Go to Blogger.com
2. Now go to “Design“, then to “Edit HTML” section
3. Back up your present template, by “Downloading it
4. Now click on “Expand widget templates
5. Find this code:

</head>

And just BEFORE/ABOVE this code, paste this

<!–RelatedPostsStarts–>
<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(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) 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://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js’ type=’text/javascript’/><!–RelatedPostsStops–>

6. Now search for this code line:

<data:post.body/>

And after that line, paste this code:

<!–RELATED-POSTS-STARTS–><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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 != &quot;true&quot;’>,</b:if><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> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!–RELATED-POSTS-STOPS–>

To change the number of similar/related posts to be displayed, change the code max-results=xx
Finally save your template, and you will see related posts after all your posts(Remember to add labels after your posts, during publishing them)

Credits : Blogger accessories

Leave a Reply

204 Comments on "Blogger Help – How to add related posts below every post"

Notify of
avatar
Sort by:   newest | oldest | most voted
Sujith Bhakthan T R
Guest

hey its not working. getting some error

View Comment
Divya Sai
Guest

Hello Sujith

thanks for the comment,
because of you an important correction has been made in the code, try it out now, it’s working !

View Comment
Sujith Bhakthan T R
Guest

ya…now its working….thank u very much…
your site is very informative and helpful.

thank u very much

sujith bhakthan

View Comment
Eleté
Guest
Hi Divya, I found your blog and you got yourself a new subscriber, loads of interesting stuff! Well, my problem is I implemented this script on my blog, and while its working fine its impossible for me to determine an exact number of realted posts to appear on the entries. With the default code I got about 12! Then experimented and for 1&quote; id get no related posts in my last entry, 2 in my 2nd and 3 on my 3rd and so on! I finally settled on subsituting 5 for 2, what shows 6 or 7 an entry but… Read more »
Divya Sai
Guest

Hi Eleté

I have highlighted the code in RED color (in second code), which controls the number of posts to be displayed.

BUT, you have to write 1 number LESS than what you want in the code.

For ex. In my blog, I have used 7 in the code, and 8 posts are displayed as related posts.

So to display 3 posts, you have to replace the default 5 with 2, in the red code (max-results=5)

Hope this helps you !

And Thanks for subscribing, you are always welcome on this blog…

Regards
Sai

View Comment
Jill
Guest

I REALLY want to get this to work in my blog, but it is not…I think it might have to do with my customized template. I don’t get any errors…but nothing shows up on my blog. Can you help??? I would really appreciate any assistance you can offer.

View Comment
Divya Sai
Guest

Hello Jill

Download and send me your template, at bloggerstop.net[at]gmail[dot]com

I’ll reply you where to add the code!

Regards
Sai

View Comment
dlcomplete
Guest

thanks bro it’s really great.
http://www.dlcomplete.com

View Comment
Divya Sai
Guest

Welcome dude !

View Comment
Sandhu Singh Navjeet
Guest

Hi , I googled for this trick and found your blog. Quite a high ranking! I liked it very much, loads of good stuff.
you seem to have hit a regular reader.

Anyhow I tried your code, it’s not giving any error but neither it’s showing up anything.
After reading the above comments I realized what I have to do. So I’m mailing you my template.

Hope to hear from you soon.

View Comment
Divya Sai
Guest

You can of course send me your template at the above mentioned email id !

View Comment
Hanna
Guest

your site is very informative and helpful.

thank u very much

Mansi

View Comment
Divya Sai
Guest

Thanks !

View Comment
KMc
Guest

Searchles just came out with a contextual Related Posts widget for blogger that actually analyzes your text to match related posts – doesn’t rely on categories or tags. Has SEO benefits too and is pretty easy to install. You just add a gadget to your layout and embed the code and it’s up and running. It’s pretty cool – you guys should check it out: http://searchles.com/misc/platform

View Comment
Amol
Guest

Hi Divya,

This is a great resource. I have subscribed to this blog.
Good work.

View Comment
Divya Sai
Guest

thanks Amol….I admire regular & loyal readers, you are always welcome here !

View Comment
Tomate Suicida
Guest

I’ve tried it on my blog but it gives me an error.
can i send u my template too ?

thank you

View Comment
Henry Ramirez
Guest

good post,,i was looking for this for my web site

thanks

View Comment
Divya Sai
Guest

Welcome Henry !

View Comment
Anonymous
Guest

Hi. Thank you for sharing this useful widget. I’ve tried to install it in my blog. But I find that it will only show the most recent 5 related post. Is it possible to make it to show random related post instead of the most recent one? Thanks

View Comment
wpDiscuz