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

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

    View Comment
  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.

    View Comment
  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.

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

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

    View Comment
  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!

    View Comment
  8. 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!

    View Comment
  9. 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<

    View Comment
  10. 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.

    View Comment
  11. 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

    View Comment
  12. 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?

    View Comment
  13. 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

    View Comment
  14. 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!

    View Comment
  15. @ 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–>

    View Comment
  16. 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 ๐Ÿ˜€

    View Comment
  17. 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

    View Comment
  18. 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.

    View Comment
  19. 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

    View Comment
  20. @ 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.

    View Comment
  21. 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.

    View Comment
  22. 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

    View Comment
  23. 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.

    View Comment
  24. 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.

    View Comment
  25. 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"

    View Comment
  26. 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?

    View Comment
  27. 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;}

    View Comment
  28. 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.

    View Comment
  29. 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 !!

    View Comment
  30. 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!

    View Comment
  31. 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 ..

    View Comment
  32. 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!

    View Comment

Leave a Reply

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