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

204 thoughts on “Blogger Help – How to add related posts below every post

  1. 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 id rather have a fixed amount of 3 related entries on every post. Can you help me work the code? Thank you!

    btw, this is my blog, its in spanish but you get the idea todosobrecamisetas.blogspot.com

    contact me at todosobrecamisetas@gmail.com

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

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

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

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

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

  7. Hello! I am trying to add a “related posts” widget to my blog for days!

    Your tutorial was the only that actually works for me!

    Thank you!

    And a question:

    Is there a way to exclude the current post/article from the displayed “Related Articles”?

    Thanks in advance!

  8. Hi Divya.I have added the code and messed up the whole thing..Would u please agree to have a look if i send you the template..
    Please give me ur email if possible so that i can mail u the template

  9. I took the liberty of sending my XML template across to you. For some reason the code is not working although I have no errors. Please fix if you can.

    Great blog!

  10. For those of you who aren’t aware of this, once you implement the code it won’t show up on your main page it will only show related links once you click on a post. I wasn’t aware of this and send the template to Sai.

    Sai helped me to change the link color from blue to white to fit my blogger template – thanks. To do this
    change the #054474 in the first code to #FFFFFF. Works like magic – THANKS!

  11. Hey Divya,
    I hope u received my template..I had tried implementing the related post plugin and messed it up..Did u get time to have a look.
    The name is OnlineTreasure

  12. Again thanks for your work; I can’t seem to control the number of related posts. I set it at 6 yet more than that are populated, any help?

  13. thanxxx too share code related links,,, now i put thses steps On my blog….. ha ha ha ha

    & i gate more triffic from google

    OR more time spand my visitors in my blog…

  14. i have fixed the problem and its not with max-results…

    the results is controlled by other thing called i<20 make it 5 or 6 according to your needs..

    its in script file and add the script directly to you file.. no need of external like this

    <script type='text/javascript'>
    Here the text file
    >/script<

  15. Thanks Vikas for mentioning that…

    @Fusion
    The problem is there where you have used more than 1 labels, and with increasing labels the count of related posts also inc. (with max results=20, as mentioned by Vikas above), so change that value in the .JS file and then either you can upload it or copy and paste the code in that file as shown by Vikas in the previous comment.

  16. Hi Divya,

    thnx for the quick reply…

    The related post displays the post which we have opened… can u plzz tell me how to rectify that problem.?

    Not to display the same post in related problem

  17. Hi Divya Sai,

    Waiting for your answer for the above post

    "The related post displays the post which we have opened… can u plzz tell me how to rectify that problem.?

    Not to display the same post in related posts"

    We need to check the posts before display with post:data.title how?

  18. Hi when add the widget it only shows up when once you have clicked on the individual blog and view it. Is there anyway of getting it to show up below the blog posts? Also it only show up when my blog is set to public not when its private. Is there anyway around this?

    Thanks
    Clayton

  19. ah nevermind, I've uploaded it to fileave.com and this widget worked! And that says so much coz this is the only widget for related posts that worked for me.

    However, as asked also by Clayton in a previous comment, how is it possible to show the related posts in the front page,not when only clicking the post itself? thanks!

  20. @ homeandonlinejobs

    In the sixth point, simply remove these two bolded lines from the code:

    <!–RELATED-POSTS-STARTS–><b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>






    </script></div></b:if><!–RELATED-POSTS-STOPS–>

  21. You-are-a-genious !!!

    Man, this is just plain awesome !! But I see a little problem and is that the 'dotted' line is going to the 'Wideget zone' of my blog..

    I think I can solve this with the Width/Height help, but if you know how to fix it surely, please answer me ๐Ÿ˜€

  22. Hello Danoxs,

    I am glad you were here…
    Yes, you have to change the width of the widget from 540px to either 500px or 495px, change the 5th line in the first code:

    <!–RelatedPostsStarts–>
    <style>
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;

    I have just seen your blog, and I liked the way you have used the opacity buttons on your blog, if you want I can show them as example work in that tutorial ๐Ÿ™‚

    Regards
    Sai

  23. Hi Sai,

    Let me tell you this,I've been on numerous website, and as for now, there is no other site like yours for people looking to dress up their blog. Thank you thank you.

  24. Thanks buddy…..really glad to know that this blog helped you…please keep visiting
    Just visited your blog too, and I must say that you have maintained it with with good & regular content and proper alignments & color combinations. One suggest I would like to give you is to take a custom domain too as your blog already looks pro, it just needs a domain.

  25. Stumbled across your blog via google one day and I've been an addict since.
    Well, I'm using schemer mag template and this hack ain't working on it. :(( Divya I really need your help on this one.

    I started this particular blog last month and I learnt blogger ain't particularly good for SEO at the moment, I need all the help I can get to get some good ranking and I've been dying trying to make this widget work ~x(. Previously tried a couple of widget but it aint working too. PLEASE HELP ME OUT. I'LL E-MAIL YOU MY TEMPLATE.

    Free Full Version Anonymizers, Anti-censorship &Online Privacy Tools | PC Tips and Tricks

  26. @ doncaprio,

    glad to know that you are addicted to this site ๐Ÿ™‚

    just visited your blog, but couldn't find the code. Anyways if you are sure that the there's wasn't any mistake in the code that you added then try the widget from linkwithin.com

    feel free to comment here for any blogger help.

  27. Hi Elizabeth,

    Your widget is actually working perfectly, but it isn't able to to show any widget, cause you do not have more than 1 posts with a single label.

    If "earrings" is a label you used in post-1, then you should add this same label to post-2…
    And so, post-1 will be shown as a related post in post-2 and similarly post-2 will be shown under post-1 as a related post.

  28. hai divya, amazing works, but it doesn't work for my blog, I don't know what went wrong.
    I have red comments above one by one, and make it fix.
    But It didn't work yet.

    Please give me a hand to fix it… I really want to use related post widget…
    Thanks

  29. Hi Sai
    I am a big fan of you. Need your help on this one. Did this setting and got as expected. However, I would like it to be a little different.

    1. I want the dotted lines to be a little shorter. Read one of the earlier comments to change the width to 495 or 500. However, on doing so, the sections below are getting mixed up with 'Related articles'.

    2. Instead of the related articles coming in plain, i would like them to be put in some canvas kind with some light background. Is this possible?

    3. For the time being, i have kept the "You might also like" section below. Its not very helpful since i cannot bring the widget before the share buttons. However, the "You might also like" automatically starts taking the default font of my blog.Is it possible in 'Related articles'.

    My blog: http://unix-school.blogspot.com

    Waiting for your input.

    Guru.

  30. Hey Guru, glad to know that…

    1. According to your blog's width I think 500 is suffiecient, so no need to decrease the width, if it is causing some other probs.

    2. Edit the starting few lines of code, which are:

    #related-posts {
    float : left;

    to this:

    #related-posts {
    background: #F3EADA;
    float : left;

    You may use any other background color/image instead of that #F3EADA.

    3. Couldn't get your third point.

  31. I am glad I could help you ๐Ÿ™‚
    & thanks for informing me about sigmirror.
    Presently I am using OpenDrive to host files, and recommending my readers too. They offer 5GB storage and 1GB/day bandwidth. Only requirement is to offer them a backlink from any of your blog-page/post. And that requirement doesn't apply it to you, if you register via this link: http://www.opendrive.com/?od=4ca4da67d1149 (for BloggerStop readers)

  32. You have to edit two things to make this work:
    1. First of all, don't upload the .zip file, UNZIP it to get the .js file and then upload this .js file to mdn.fm (mydatanest)

    2. And at your mydatanest account, edit the properties of the folder where you have uploaded the file and set the permissions as "Hidden" instead of "Private"

  33. Hey, I got it working! Whoo! So excited for this. Anyway, I updated the max-results number to 3, hit save, and there are 17 related posts displayed beneath my post. I went through and edited the number of labels I have, but I'm still winding up with too many related posts.

    And when I tried following that other guy's advice, I couldn't find any code that read i<20. Please help?

  34. thx for this great tweak. the solution for current post showing, you have make this in js

    change this code
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;

    to
    if (entry.link[k].rel == 'alternate') {
    if(location.href.toLowerCase()!= entry.link[k].href.toLowerCase())
    {relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}

  35. I tried this and it worked. But I have some questions:

    1. How do I make the font size of the links increase and its colour change?

    2. How do I change the colour of the "Related Posts" word?

    3. How do I make the Related Posts close to the last line of my post?

    Thanks as you respond.

  36. I'm so clueless when it comes to code, I thought I had this figured out but it isn't working. I'm not sure if it has to do with my customized template I got online or what. HELP! ๐Ÿ™‚

  37. I do not have any problem in application of this HTML script. .i am running 3 blog and i applied this for all my blog.and works perfectly.i just need to know that i want to Show posts from my another blog(i.e) my 1-st blog post should appear in 2-nd blogs related post ! is it possible pls replay soon !!

  38. Hi, thanks for this. It would work better for me if it didn't display the source post as one of the related posts (for instance if there is only one instance of a tag). How might I fix that?
    thanks
    Will

  39. HEY I TRYED YOUR CODE IN MY BLOG BUT ITS NOT WORKING AND FOLLOWING ERROR APPERED

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The string "–" is not permitted within comments.

    CAN YOU PLEASE HELP ME DEAR.
    THANKS!

  40. Hi. Your tutorial is very interesting. But, I've got a little problem about the popular post.
    Would you help me, please?
    Sentence for his popular post is not comes up in my blog.
    Please visit my blog at merahmarunluck.blogspot.com so you can see it and give a little of all this problem solving.
    Thank you ..

  41. Related posts are very cool on any blog. They can help you increase the number of page views per user. I've been using a plugin in WordPress since a long time and I guess now it's my time to add it in Blogger blogs as well.

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *