You might also like this Widget for blogger or Related post widget

You might also like this Widget for blogger or Related post widget
Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.
So you are tempted to add this widget then follow this steps:

  1. Login in to your Blogger Account.
  2. From Dashboard Click on Layout and the Click on Edit HTML.
  3. Then Check the “Expand Widget Templates“.
  4. Find </head> .
  5. Then Before  </head> Paste the following Code.
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    
    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  6. Now Find
    <div class=’post-footer-line post-footer-line-1′>.
  7. Now immediately below that line add this code.
    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != "true"'>
    </b:if>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs("<data:post.url/>");
    </script>
    </div><div style='clear:both'/>
    <br/>
    <a href="http://www.best2know.info/2010/04/you-might-like-this-widget-for-blogger.html" target="_blank"><b>Grab This Widget</b></a>
    <!-- remove --></b:if>
    <!-- Related Posts with Thumbnails Code End-->
    [Re:FIXED]
  8. You can adjust the maximum number of related posts being displayed by editing this line in the code.
    var maxresults=5;
  9. To edit the title of the widget you can change this line of code.var relatedpoststitle=”Related Posts”;
  10. To change the default thumbnail, you can edit this line of code.
    var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
  11. To Change the Colour of the Splitter Line , edit.
    var splittercolor=”#d4eaf2″;

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don’t panic.. You might also like this Widget for blogger or Related post widget .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!– remove –> from both step 5 and step 7.

that is lines

<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>

and

<!– remove –></b:if>

After listening to the comments by all of our visitors this code has been updated.

Subscribe Now

Enter your email address:

  • Anonymous

    Good one thanks i have seen many of this types of widgets that are used sites like outbrains and linkwidget and i hate it. and also they take time load thanks for it.

    • http://appointernet.blogspot.com/ AppoInternet

      try linkwithin it is very nice …… I am using it

  • turiya

    I tried installing this on my recipe blog and the only thing it's showing is the link for "Get this Widget". I have no idea what I did wrong. You can contact me at hisspirited1@gmail.com and here's the link to the blog if you want to have a look:

    Thanks!

  • Ritesh Sanap

    I have checked your blog I have seen that you already have the same type of widget . I think if you want use this widget replace that widget with this one and note that i think the current widget will suit your blog as the posts you are doing does not contain images so . keep that widget its good one or if you still want to use this widget start using images in the post . otherwise it will show no-images and the title which won't look nice.

  • zie007

    great info..awesome! thanx

  • Ritesh Sanap

    @zie007

    thanks to you all who supports best2know

  • Ritesh Sanap

    @zie007

    thanks to you all who supports best2know

  • Anonymous

    what if we do not have a thumbnail for each posts in the blog? would it still be listed?

  • Download Amazing Videos

    If you give us a seperate html/javascript coding , we (users) can easily install this widget to add as a gadget and show related post…can u give me such..?

  • Ritesh Sanap

    @Download amazing videos

    my friend we cant do this because this widget contains special blogger tags which only works in main coding page of HTML if we make a widget installer for its then it wont work then also i will try to make one if i get succeed i will release it.

  • Bon-bon

    Please help, I have a same problem than turia, just grap this gadget sign appears, but did not understand what to change to get work this widget,
    my blog
    http://inspiraciok.blogspot.com
    Please be precious with answer, i m begginer with html
    thank very much!

  • Ritesh Sanap

    @Bon-bon

    I have the your site and noticed that the code has stopped working so dont worry I will update it.

  • killyourdarlings

    I just added this code, and it´s not working. As you wrote to bon-bon you will update it, does that mean the code will work again? or what?

  • Ritesh Sanap

    @killyourdarlings

    yup the code will work again but that one will be the new code.

  • Ritesh Sanap

    @killyourdarlings
    The code has been updated so give it a try and enjoy

  • eMiLy ChAnG

    I copied and pasted the code. but it is still the same :\

    emily
    http://diaryofemilyc.blogspot.com/

  • Ritesh Sanap

    @eMiLy ChAnG
    I m extremely sorry that earlier code also didn't work i apologize for it but this one will surely work please try it and thank you for understanding me

  • Joy Reynaldo

    I'm getting an error:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "callback" must end with the ';' delimiter.

  • Ritesh Sanap

    @Joy Reynaldo
    I m extremely sorry that i forgot to convert the code. Now i have converted it.Go ahead and take the code.

  • Spade

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "max-results" must end with the ';' delimiter.

    =[ why ?

  • Ritesh Sanap

    @Spade
    Problem Solved

  • Nadzirah Hazwani

    I pasted the code but unfortunately it did not appear at all.. what is the problem?

  • Ritesh Sanap

    @Nadzirah Hazwani
    Pls post the link to your blog with your Email Id. Until i see it i cant really tell you the problem.

  • Mrs. Smith

    Still not showing up on all pages – only the individual post pages. How can I get it to show up on the bottom of all posts on the main page??

  • Ritesh Sanap

    @Mrs. Smith
    If you want to display it on main page also then just remove the code around the Remove HTML Comment

    like : <!– remove –></b:if>

    Please note that this step is already described in the tutorial

  • Mrs. Smith

    @Ritesh Sanap
    LOL! Did this but didn't save it before. Saved it now and it's working beautifully! Thanks so much! Appreciate it!

  • Ritesh Sanap

    @Mrs. Smith
    You are most welcome. Contact Me at any Time i will help all of you out just a message at this id riteshsanap@gmail.com and i their for your help

  • ReluctantLA

    Hi,

    I'm deciding between YARPP with no thumbnails, LinkWithin or something in between. My template also has "Related Posts" on the top right sidebar. My feeling is that it's distracting on the sidebar and makes more sense on the bottom of the post. I could also have both, but that may be overkill. A simple/minimalist look is my aim. http://www.reluctantla.com. Can you give me your thoughts?

  • Ritesh Sanap

    @ReluctantLA
    See the all the three widgets have been designed in the same way but the YARPP and LinkWithin are not much customizable like this open as this is the main source code behind very Related Post widget for blogger available on the Internet.

  • telugu songs free download

    i have placed this code and i am not able to find 'Related Posts' under my posts. Can anyone look into my blog and suggest me, if any thing went wrong or not.!

    This is my blog
    http://latestsongstelugu.blogspot.com/

  • Ritesh Sanap

    @telugu songs free download
    The Problem is not in the code the problem is that you are using different labels for different post. this All related post widgets run using labels.Try using a Particular label for more then one post like if the song is sung "x" singer then if you are posting another Song Sung by that singer then add that label this will surely run. the related post widget if any other help then do tell

  • MrsBossa

    Hi, I tried this and it just said, 'Grab this widget', so I tried to delete these bits if html and now it says this:

    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 element type "head" must be terminated by the matching end-tag "".

    Can you help? I'm only a beginner at html.

  • Ritesh Sanap

    @MrsBossa
    This code is not an simple HTML code so i would sugguest you replace the old code again. I would sugguest that not play with some important codes as they harm our site.

  • telugu songs free download

    thanks for the reply Ritesh. Hope i can get it from this time.

  • Ritesh Sanap

    @telugu songs free download
    You are most welcome. If any other help then don't hesitate to ask

  • Ben Ralston

    Hi Ritesh,
    Thank you for this, it's great!

    I have a problem though – only my old posts are getting updated by this (no related posts are appearing below my new posts).
    Any ideas why?

    Many thanks,
    Ben Ralston
    premjogacenter at gmail dot com

  • Ritesh Sanap

    @Ben Ralston
    Hi I m Glad that you contacted me when you have a problem but while Reporting please also include the link to your blog so we can verify what is the problem so i cannot reply you with solution right now.So now please reply back with link to your blog

  • http://www.perceptionsart.com Daniel

    @Ritesh,

    Hi, I’m trying out your widget. Can I ask something a bit technical: how does your widget determine which posts are related?
    Thank you

    • http://www.best2know.info/ Ritesh Sanap

      Hello this plugin work on labels if you don’t add labels to the post the Widget won’t work, as blogger ain’t that advance to use Title and Post keywords it instead uses the Labels of the post and then matches it with the other post the most post getting the relevant and same labels will be displayed first and so.

      Hope you Understood :P

  • http://www.perceptionsart.com Daniel

    Hi Ritesh,
    Thanks for ur explanation.
    How come the widget only gives very limited suggestions for related post? (many times, only 1 suggestion)
    Can you take a look at my website, please?
    And is there a way to make the thumbnails bigger?
    Thanks

    • http://www.best2know.info/ Ritesh Sanap

      As I told you the Widget uses the labels more the relevant the labels are the related post you get , if their is one post having that much relevant label then only that 1 post will be showed

      • http://www.perceptionsart.com Daniel

        @Ritesh

        Yup, sure… I completely understood your explanation.
        The reason I’m asking is because I have 22 posts with the label “wedding”, but the widget only provided 1 relevant post (even though maxresult has been set at 5).
        That’s why I initially asked how the the widget determines relevancy.
        So, I was a bit confused as to why the widget didn’t work properly.

        Thanks anyway

  • http://www.selfsagacity.com Self Sagacity

    This code did not work for me at all. I checked and re-did a few times. I also took out the LinkWithin to see if it will work, but no. I put LinkWithin back.

    • http://www.best2know.info/ Ritesh Sanap

      Ohk , Then i guess it will need to figure out

  • Jolene

    Thanks for the tutorial. Mine worked fine, with the exception that it is displaying the related posts over top of my “labels”, “comments” etc…
    Any ideas how to correct this?

    • http://www.best2know.info/ Ritesh Sanap

      Jolene ,

      If you provide me with the link were you encountered this , it will help me to troubleshoot your problem

    • eko hardiyanto

      maybe your problem in your template….try editing in design->page element->posting blog…then edit…rearrange…and check it

      • http://www.best2know.info/ Ritesh Sanap

        Thanks buddy for your reply , its great that you are helping others :) , please continue kind work like this :)

        • http://opensource-programming.blogspot.com Eko Hardiyanto

          hehe…its ok..thanks for your support..^^

  • http://onlinegames7.blogspot.com/ khawer

    I have added the code and increased the maximum result to 10.But still its showing only 5

    • http://www.best2know.info/ Ritesh Sanap

      khawer ,
      did you changed ? this one to 10 :
      var maxresults=5;

  • http://onlinegames7.blogspot.com/ khawer

    How to change thumbnail size in this url
    var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

    • http://www.best2know.info/ Ritesh Sanap

      Khawer ,
      you cannot change size using this URL instead i suggest change the URL to one you like , otherwise make changes in the CSS to get the desired results

  • http://www.flash-lovers.blogspot.com sabreen

    thanks your site is great .but I implement these steps many times but no results
    I got the similar steps from different site but no results

  • http://onlinegames7.blogspot.com/ khawer

    Yes i have changed max result to 10 and its working.To change thumbnail size do i will have to replace full url to any other image location link

    • http://www.best2know.info/ Ritesh Sanap

      Its not that necessary to change the URL , but you can also use CSS instead to expand the size of that image

  • Tahmy Khan

    I tried that script but nothing got except only an error. Check this.

    • http://www.best2know.info/ Ritesh Sanap

      Tahmy Khan,
      I m unable to find you using categories, the widget only works when you have valid categories and post in that categories

  • http://ninaberioso.blogspot.com/ Babbling Little Booties

    I have already fixed it.. Thanks! take a look at my blog

    • http://www.best2know.info/ Ritesh Sanap

      Great and it is working great as i can see it :)

  • J

    Does this code work for a private blog? Because I’ve checked and re-checked the code and I don’t see anything. I did this step too: “ from both step 5 and step 7.” and I also increased maximum results to 10 to see if that would help but it didn’t. When I look at the individual post “grab this widget” shows up though. Thanks!

    • http://www.best2know.info/ Ritesh Sanap

      J please tell me the URL of your blog so that i can checkout what is the problem

  • http://gujjumakesmemad.blogspot.com GuJJu Freak

    Thanks a lot man, used this script and works charm.

  • http://www.google.com vee

    hey, it work but only on posting page..
    buat I can’t see in every page or in home..

    any solution?

    • http://www.best2know.info/ Ritesh Sanap

      please check the post properly i have mentioned their how to show it on all pages :)

      • http://www.google.com vee

        eh, it work..
        sorry because I only remove the 2 lines in code above , and I forget to remove 2 lines in the other code..
        my big thanks for this great tutorial ~ :)

  • http://tomagiko.blogspot.com WiZaRDe

    hello there. congratulations for you site, it is very good..
    i would like to ask you how can i change the colors of the letters cause cant see them. you can check t an my site tomagiko.blogspot.com
    thank you

    • http://www.best2know.info/ Ritesh Sanap

      WiZaRDe, to change the color just make the changes in CSS code.

      • http://tomagiko.blogspot.com WiZaRDe

        And where is this CSS code? I want to make them white than black. Thank you again

  • http://www.dckap.com/ruby-on-rails-development.htm Ruby on rails developer

    I have added this widget in my blog but it shows in a bullets format. Thanks for sharing this widget to all.

  • http://proreview-allinteractive.blogspot.com Review All

    Thanks this was very helpful to building my site.. It will be very gratefull if you have time to visit my site and give suggestion on how could improve my site…

  • Heart Hackzzzzz

    It is working ………. thanks for sharing i have added this to my blog

  • http://www.maremaru.tk nirmal

    i have tried this
    but no use
    can u help please ??

    • http://www.best2know.info/ Ritesh Sanap

      can you please specify the problem

  • http://www.dckap.com/magento-commerce.htm Magento developers

    I was search a lot, finally i reached here. This code is working now in my blog. Thanks for sharing some of these blogging tips. Looking for more blogging tips.

  • http://appointernet.blogspot.com/ AppoInternet

    Thank you i am going to apply this in my blog …… Thank you for sharing …

  • http://pennyandcent.blogspot.com/ xiao bai

    Hi I followed the steps, but cant seem to get it working. sincerely need a lot of help. Thanks

    • http://www.best2know.info/ Ritesh Sanap

      Well, i can only help if you mention what exactly is the problem

  • http://www.cookingwithoutanet.com Debi Morris

    Hi – I finally updated to the new Blogger templates. I was hesitant because I knew I would lose a lot of my custom additions. One of them I did lose was this widget, which was working fine with the old version. Now I am having trouble following your instructions – when I click on “expand widgets” I can find the easily and insert the first code before it, but there is more than one “” line in my template, so I am not sure which one the second part goes under. TIA, dejamo.

  • http://youhavetherighttoremainawesome.blogspot.com darth-abbey

    I put this code in, but when I had a look at my blog nothing had changed.. there wasn’t a ‘related posts’ widget anywhere. Darn. I didn’t have any trouble finding where to put the codes in, your instructions were good.. but yeah, no widget– any advice on what might have gone wrong?

    • http://www.best2know.info/ Ritesh Sanap

      The Code only works on the Post Page, take a look whether it is working their or not

      • darth-abbey

        yeah that’s where I was looking for it.. no code

        • http://www.best2know.info/ Ritesh Sanap

          Well i found out the reason is simple, the widget runs on labels, but you have not used labels in any of your posts, because of that the widget is not working

          • darth-abbey

            Ah. Simple enough, thanks :)

  • http://catchfun.blogspot.com Kiran

    Thanx a lot dude

  • http://amazinglyjustbeautiful.blogspot.com/ xedric

    Hello,

    I followed exact instructions you stated above, but still no changes…
    Can you help me?

    Here’s my blog
    http://amazinglyjustbeautiful.blogspot.com/

    • http://www.best2know.info/ Ritesh Sanap

      Xedric,
      you are not using Labels, and this widget is based on Labels

      • http://amazinglyjustbeautiful.blogspot.com/ xedric

        Please do provide me a detailed instruction on how to solve this issue… Any help is greatly appreciated..

        thank you.

  • http://chat-ame.blogspot.com/ ame

    Nice , i try

  • http://jankestauorg.blogspot.com Solid Planet

    I really likes this widget. The problem is that the many of the same posts are showing up again and again on different posts because its only displaying the top 5 results returned. I need to randomize it a little so that the related posts are more varied, but still related by tag.

  • http://allinfoatoneplace.blogspot.in/ sekhar

    Hey this is not working on my blog… could you please help? I have pasted the code in html still I don’t see the related posts section.

    http://allinfoatoneplace.blogspot.in/

    Thanks,
    Sekhar

    • http://www.best2know.info/ Ritesh Sanap

      Sekhar,
      I checked the source code of your site and have found that you have not implemented the code

  • http://allinfoatoneplace.blogspot.in Sekhar

    Hello Ritesh,
    Sorry your code was accidentally removed, I have placed it againcould you please check now and help me out why it isn’t working.
    http://allinfoatoneplace.blogspot.in/2012/04/how-to-create-facebook-widgets-for-blog.html

    Thanks,
    Sekhar

    • http://www.best2know.info/ Ritesh Sanap

      Hello Sekhar,
      I have seen the source code, and found out that you have not used the second part of the code, check the code at the 7th point, and use it at the proper place.

  • http://animascots.blogspot.com/ Yona

    Hello, it’s doesn’t work to my blog.. Would you help me pls..
    Thanks.. :)

    • http://animascots.blogspot.com/ Yona

      I’m sorry my friend.. It finally works.. Thanks for your share.. 8-|

    • http://www.best2know.info/ Ritesh Sanap

      Hello, We have stopped Support for Blogger, because in recent years blogger has changed a lot.

  • http://animascots.blogspot.com/ Yona

    Dear,
    How to make the thumbnail image bigger than 72px?? Can you help me?

    Thanks.

  • http://jayrweblog.blogspot.com/ Jayr

    thnanks for sharing this! it helps a lot,

  • http://www.studentsneedmoney.co.uk Matthew Gibson

    LinkWithin is another good site for this, much simpler tool to use.

  • spath

    hello and thx for the code, working perfectly and with the tutorial its so easy to put on his blog.

    I have 1 question, how to change the choice to collect labels, for example in my post I have a 3 tags but because the blogger puts labels in alphabetical order , so the code always chooses the first label, its possible choose some specific tags first and after all else;

    Thanks for your time!

    • http://www.best2know.info/ Ritesh Sanap

      Well, i have never thought about this, because we have less control over blogger.

  • http://www.abuelaverde.com Julian Osorio

    hi, i’m using a custom template and don’t see this code . I see this . I paste the second code above this and don’t work… can you help me?

  • http://cinetrafficzam.blogspot.com CineTraffic

    Bro, i successfully done everything, thq so much. but how to change text colour and splitter colour .please tell me

  • http://robertagervasi.blogspot.com Roberta

    hello!! I’ve done everything, and it’s perfect but I just want to know I can make this more big!!!
    thank u

  • Anna

    Hi, thank you for your the code. But I think I did something wrong, nothing changes but now I dont know how to fix it:(
    Could you please help me?

    • http://www.best2know.info/ Ritesh Sanap

      I m extremely Sorry, but the support to Blogger has been cut off, i m extremely sorry :(

  • http://interservices4u.blogspot.com/ Asad

    this code is really working in my blog.
    good job and great thanks for sharing it

  • http://thefashionjunki.com/ Peppi

    Hi, just found this and it’s awesome, I’m just curious ho do you change the width?
    Thanks for the answer!

    • http://www.best2know.info/ Ritesh Sanap

      Well you can edit the width by using CSS

  • aravind

    thanks for sharing. I have tried to add this to my blog slurpyplatter.blogspot.com following the steps above and also through Linkwithin, however neither method is working to display the widget. Can you please help?

    • http://www.best2know.info/ Ritesh Sanap

      The Reason is clearly simple, the Related posts in blogger are displayed based on Labels and not on title, you are using labels, the problem is that you are creating new labels for every new posts, the widget will properly work when, you give the same label to 2 to 3 posts, then you can see the widget working

  • Aseel

    Not working on my blog plz help me
    http://www.rockingaseel.blogspot.com

    • http://www.best2know.info/ Ritesh Sanap

      Aseel, I have checked the source code of your site but it appears that you have not completely implemented the code, just try this whole Procedure again

  • Yash Goyal

    This is not working on my blog http://jokesarelife.blogspot.in please check….

    • http://www.best2know.info/ Ritesh Sanap

      it seems you have not added the code mentioned on Step 7, please insert it and try again.

  • Obet Tea

    Finally it works on my blog http://super-gratisan.blogspot.com
    Thanks Ritesh Sanap. Keep sharing.

    • http://www.best2know.info/ Ritesh Sanap

      it looks beautiful on your blog, I guess you did some styling to it.

      • Obet Tea

        yes, I did on css code

© 2007-2014 Best 2 Know – The Ultimate Blogging Resource
The content is copyrighted to Ritesh Sanap and may not be reproduced on other websites.