Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger

related posts with thumbnails for blogger

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.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

</head>

and replace it with

<!--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://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>
Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;
you will also have to edit the posts per label(it should ideally be one more that maxresults)
max-results=6

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

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

7.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.. :) .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 3 and step 2.

that is lines

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

and

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

Update 29/03/2012 : If the script is not working for you then please change http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js to http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

Sorry for the trouble :-)

Permalink: Related Posts with Thumbnails for Blogger

1,126 comments :

  1. this is very good version of this hack..........

    You are making blogger a better place

    ReplyDelete
  2. now, we are needless to sign in at linkwithin. .

    ReplyDelete
  3. Bro everything is just perfect, but the last section of related post appends to next line. May be because I'm having less room for posts. Kindly have a look @ http://www.techquark.com/2009/08/isros-bhuvan-google-earth-competitor.html. Currently I'm having 4 posts on and so it's fine, but I want it to work for 5 also !

    ReplyDelete
  4. @小天, this will use only images uploaded via blogger to your posts.. If you don't have any images uploaded for a particular post(through blogger),then it will show a default image saying No Image

    ReplyDelete
  5. Thank you very much, now we don't have to rely on LinkWithin. I have a question though: can i download the script and play with it a bit? Like customizing it to suit my needs?
    Thanks again.

    ReplyDelete
  6. @z-vet,
    yes you surely can.But if you republish a modified version of this one,please do provide a dofollow link to this post..

    ReplyDelete
  7. This is truly awesome. I am leaving linkwithin now.

    ReplyDelete
  8. @Momto3LittleFlowers
    do you label your posts?
    The related posts are fetched using the label data.
    And which blog did you try to install it..?

    ReplyDelete
  9. This is the blog that I tried to install it: http://www.diaperdiscussions.com/

    And yes, the posts are labeled.. All of them...

    What can I do?

    ReplyDelete
  10. Aneesh: Yes, I just tried again and it worked! :) Thanks!

    ReplyDelete
  11. @Momto3LittleFlowers
    yea i had checked that url.I had mentioned it in my previous comment! The related posts are well displayed on your post pages..

    BTW i loved your blog design! did you do it on yourself..? just ased after seeing your blogger profile.. :)

    ReplyDelete
  12. Aneesh: Yes, I did it myself.. That is for one of my customers.. I do blogs and websites :)

    But I dont like linkwithin because sometimes it shows in the blogs of one of my customers, things from my blog, as Im an author in both.. :)

    ReplyDelete
  13. Now I know what is the deal.. The reason why I didnt notice that it worked right away it's because it will only show it if a person goes to the direct link of the post, not the main link...

    ReplyDelete
  14. @Momto3LittleFlowers,
    cool do you have a blog where you publish your blogger templates??

    yea the related posts will be displayed on post pages only.You can display it everywhere if you want.(just take off the b:if conditions)

    ReplyDelete
  15. I make them personalized for each customer... The one that is for selling is the one in my profile called: 3 Little Flowers - The blog...

    As for removing the b:if .. I did, but it doesnt show anyway... Any other idea??

    ReplyDelete
  16. you didn't take off the b:if conditions form the code in Step 3.

    ReplyDelete
  17. No, I didnt.. LOL.. How did you notice??

    Anyway, it looks like I did something wrong, cause even though it now shows in the main page, some of them shows: Undefined...

    ReplyDelete
  18. @Aneesh: thank you very much! Sure i'll provide a link, you have to get a credit for your work.

    ReplyDelete
  19. @z-vet,
    thanks mate.. not many will do that.. :)

    ReplyDelete
  20. I cannot find any similar match in my template
    'post-footer-line post-footer-line-1'.

    Is there any other similar one to look for?

    ReplyDelete
  21. hi princess :),
    it would be enough if you place it below
    <data:post.dody/>

    BTW post-footer-line post-footer-line-1 is present in your blog http://www.mysweetlittleprincess.com/

    ReplyDelete
  22. hy,, u have great posting,, i always visit ur site friend...

    ReplyDelete
  23. Most amazing widget I've seen in a long time! Keep it up ☺

    ReplyDelete
  24. @Jakolien Sok ,
    thanks a lot for the appreciation!

    ReplyDelete
  25. I tried but still no image on the thumb. My post contain most of picture. but why still not working.
    my blog: delphi-bluefish.blogspot.com
    please ur attention. because i like this widget.

    ReplyDelete
  26. @delphi,
    the widget will take up only those images that have been uploaded via blogger[from the post editor].If you have included some external images in the posts,they wont be included..

    ReplyDelete
  27. Yes, i understand about that. That's why i changed a few my post (for test) with upload via blog post editor. But still, no image.
    So, maybe still have another way to do that? Or maybe just need few time to make it work?

    ReplyDelete
  28. @delphi ,
    show me a post which has an image uploaded via blogger
    all of them which i saw were hosted on photobucket

    This widget shows related posts.If the related post has an image uploaded via the blogger post editor,then it will show a thumbnail of that related post.Else it will show a default noimage thumbnail.Hope i am clear.You can see that it works by taking a look at the demo here on this site..The only cause for it to not work is that you havent uploaded images via blogger.instead you use photobucket for hosting.. So it wont work as long as you use you dont add photos via blogger.

    ReplyDelete
  29. I see, i see, i see....
    Okay. I got what ur mean. Mean we upload via Computer not by url. :) I am sorry for my stupid think. (and sorry too for my bad english). Now it's WORKS and I very very excited.

    Thanks very much. I owe u. Because u not just posted something but u also gave solutions for people who want to use urs.
    THANKS.

    Now i am looking for other widget and hope u assist me for may future question.

    May I re-post urs widget on my blog? Of course, i'll give source that's from u.

    One more thing, can we resize the thumbnail?

    Many many thanks.

    ReplyDelete
  30. @delphi , the images used here are the media thumbnails from the blogger feed.These thumbnails are of size 72X72 px .Currently these thumnails are displayed in their full size(72X72).It can be scaled to a bigger size using CSS.


    Yes you can republish any article on this site by giving a dofollow link back to the original post.All site contents are provided under the Creative Commons License.

    ReplyDelete
  31. I cannot find that code mentioned in point 3 in my blogs template.

    ReplyDelete
  32. @Raj,
    then place it below <data:post.body/>

    ReplyDelete
  33. Pretty cool but I think if you only have 1 label on the post then it will only show max 5 related posts.

    Check it out:
    Poker Babes

    ReplyDelete
  34. Thanks alot! your site is very Impressive!

    ReplyDelete
  35. @David Bergeron ,
    yes by default it is so,but you can change that if needed..
    in the step 3 code,there is something like max-results=6
    By default only 6 posts are fetched from a label.So only 5 posts will be displayed (excluding the current post).

    So if you increase this number(6),more can be displayed.. :)

    ReplyDelete
  36. @τreciä ,
    thanks for the nice words! i loved your blog too.. nice implementation of blogger tricks.. :)

    ReplyDelete
  37. Thank you mate ! everything works fine ;)

    ReplyDelete
  38. Dear Aneesh...
    I just publish ur widget on my blog. But of course i translated them.
    Hope u don't mind.
    Thanks.

    ReplyDelete
  39. tq dude


    http://www.mysitez.co.cc

    ReplyDelete
  40. i cannot see the word " Related posts" in my blog as the background color bar is black. i dont know where to edit in CSS code to change that bar color. Please help.

    http://mohdfarhan.blogspot.com

    ReplyDelete
  41. just after the line
    #related-posts h2{

    add
    color:white;

    ReplyDelete
  42. is not well taken pictures do not appear here look
    http://www.freewaresnbeta.com/2009/08/convert-videos-with-any-video-converter.html

    ReplyDelete
  43. Thank you soooooooo much.
    This is is really cool

    ReplyDelete
  44. it's not work..

    i can't find these code:
    < div class='post-footer-line post-footer-line-1' >
    or
    < p class='post-footer-line post-footer-line-1' >
    or
    < data:post.body / >

    so..how to resolve this problem?
    need your help..thx


    (my blog template: smash my typo)

    ReplyDelete
  45. Nice, works for me !
    Thanks... ;-)

    ReplyDelete
  46. GREAT Post !!!
    thanks!! it makes my blog look better really!! :)

    ReplyDelete
  47. Awesome! Whoo Hoo! It worked! Thank you so much.

    ReplyDelete
  48. Please help me ... why not work on first page?

    ReplyDelete
  49. Hi Aneesh as allways im around here,, I got that one in there aswell, thanks to you Aneesh, !!
    yours tutorials allways is the best i ever see..
    cool.. thanks for the beautfull job you do for us..
    have a nice weekend!!

    ReplyDelete
  50. not working on my blog, pls help.

    http://spiceupyourgear.blogspot.com/

    ReplyDelete
  51. i got the following error

    TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']

    ReplyDelete
  52. Great site! I'm customizing my blog quite a bit now thanks to you.

    One problem I'm having with this mod is that there is a large white space between "Related Posts" and the end of the post with the comments and all. How could I fix this issue?

    ReplyDelete
  53. hi..
    can this be made also for showing posts in same format, i.e. showing last posts side by side (paralell)?
    if yes, that would be very nice..

    zeki / from turkey

    ReplyDelete
  54. This is so very well done. Thanks a bunch!

    ReplyDelete
  55. very nice!! thank you very much im a big fan of your site!

    ReplyDelete
  56. Hi Aneesh. This was an awesome post. It looks better than LinkWithin!

    However, I can't get it to work.

    I followed step 1 & 2, then step 3
    (You should mention that bloggers have to click the "Expand Widget Templates" check box)

    Then nothing happened.

    I did fiddle around with my template a little bit, but I don't think it's overboard. Could you help me out?

    p.s. In step 3, after the line:

    [d!v class='post-footer-line... ]

    I paste the code IMMEDIATELY after, right? i.e.

    [.....line-1'>[paste new code here]

    ReplyDelete
  57. yes you are right! you have to place that code snippet after that one..
    btw i don't see any codes on your blog right now!

    ReplyDelete
  58. Amazing widget! I love it, great work. You mentioned in one of the comments that to have the related posts on the main page, not just on the post page, that you have to remove the b if conditions. Can you please specify what exactly you have to remove from Step 3? Thanks much appreciated!

    ReplyDelete
  59. remove the lines which look like
    <b:if cond='data:blog.pageType == "item"'>

    and

    </b:if>

    from both step 2 and step 3 codes..

    ReplyDelete
  60. I removed the codes by restoring my original template because it didn't work. I've put the codes up again. If you could take a look?

    ReplyDelete
  61. I'm sure I must have done something wrong but this does not work on my blog here: http://kidsaregreat2009.blogspot.com/

    I posted the second snippet after this code in my HTML template:
    }
    p.post-footer-line-3 {
    border-bottom:1px dashed #cc3300;
    margin:0 auto;
    padding:0;
    }

    I could not find any line that mentioned a post footer line 1.

    If I just knew exactly where to put that second piece of code, I bet it would work perfect.

    ReplyDelete
  62. Aneesh, i've figured it out. it's because of my company's proxy thing. I can view it fine at home. Decided to revert back to original template until i find somewhere i can host the script that is NOT blocked.

    Thanks anyway man!

    p.s. What do I have to edit if I want to remove the bottom lines of the widget:-

    -------------------------
    XX Comments:

    Post a comment
    -------------------------

    ReplyDelete
  63. @Kids Are Great! ,
    don't place the code of step 3 like what you have done now..
    put it just below <data:post.body/> after expanding your widget templates..

    @The House of AZ,
    the widget doesn't have any bottom underlinings.. :(

    ReplyDelete
  64. Thank you, Aneesh, for trying to help me but it still won't work. Maybe it's because it's not a standard Blogger template? I used a customized template for my kids blog. It still had the things you said to find and I put the code where you said but no luck. It just won't work. I'm so disappointed because I really wanted this.

    ReplyDelete
  65. Thanks so much Aneesh...worked like a charm!!!

    ReplyDelete
  66. I put the codes as per your instructions, not sure if i got some of it wrong... But it only shows the related posts if I view the post itself and not just by viewing the whole blog? Please assist. Thanks alot ;).

    My Blog : In My World

    ReplyDelete
  67. @ladyviral,
    i have added conditional tags so that the widget appears on post pages only..If you want the widget to be displayed on all pages,then remove off the conditional tags..

    There are conditional tags in both of the code snippets(steps 2 and 3)

    The conditional tags look like
    <b:if cond='data:blog.pageType == "item"'>
    and
    </b:if>

    if you remove these 2 lines from the code snippets in step 2 and step 3,then you will have the widget on every page of the blog..

    ReplyDelete
  68. i don't know what i'm doing wrong but it's not showing up at all on my blog : ( might it be conflicting with other codes? i've tried everything and read through all the comments but it's still not showing up. i made 2 test posts to check it out but still nothing. could you help me please?

    ReplyDelete
  69. @Angel,
    related posts are based on labels.. So if you label the posts,then there should be no reason for it not to work..

    Didn't it show any signs of a widget? Or does it display itself with some problems?

    ReplyDelete
  70. hi ,
    please help me in this
    i cant find any of the lines

    div class='post-footer-line post-footer-line-1'
    or
    p class='post-footer-line post-footer-line-1'

    what should i do ??

    ReplyDelete
  71. This widged is very good version.thaks..

    ReplyDelete
  72. can i make the thumbnails bigger?

    ReplyDelete
  73. @ahmedhamdy_27,
    paste it below <data:post.body/>

    @Aws ,the size of the thumbnail is 72x72 px .So there is no point in using a bigger size than that.. :)

    ReplyDelete
  74. Aneesh, you probably missed my question on how to fix the large white space after my Related Posts. No matter, for I've played around with your code and found a fix:

    height:50%;
    min-height:50%;

    Both were originally 100%.

    Incidentally, I also made the RP appear a little further south of the post body by making the following changes:

    margin-bottom: 0em;
    margin-top: 0em;
    padding-top: 3em;

    ReplyDelete
  75. @eastpaw
    cool findings! it might be usefult for other readers also..

    ReplyDelete
  76. I'm having trouble implementing it in my JOURNEYIST blog, should i go back to LinkWithin?

    ReplyDelete
  77. Hi,
    This is very interesting blog . I just wanted to say thanks you for writing and giving your knowledge to such an informative helpful blog.
    So thanks!
    Scholarship
    Parental

    ReplyDelete
  78. Hallo,

    I don't have the line

    div class='post-footer-line post-footer-line-1'

    or p class='post-footer-line post-footer-line-1'

    in my HTML Code :(

    Need some HELP!

    Greetz, Salomé

    ReplyDelete
  79. I uploaded images via windows live writer.
    Is there any way to show images by changing any code because images are not displaying on my blog.

    ReplyDelete
  80. Nice, I like and need this
    Thank for share

    ReplyDelete
  81. AWESOME!! I was just about to look into achieving this myself, and noticed you'd already done it (sorry I was a little late!) :)

    I'll definitely be writing about this on Blogger Buster ASAP.

    Would you mind if I made a few modifications (for my new blog design only) if I upload the script to my own host?

    ReplyDelete
  82. @Amanda,
    thanks a lot for the comment..
    its really special to get a comment from someone like you.. :)

    yea you can surely modify it in any way you want..

    btw i have just updated the script so that it takes up the full size images in case the mediathumbnails are not available.. Also did the same for the recent posts gadget.. can you please update the links to the recent posts gadget so that they point to google code instead of my site . This is the gadget url - GADGET URL

    ReplyDelete
  83. Hi,
    I can't seem to find the second bunch of links. Any advice/help would be much appreciated.
    Thanks,
    Nancy

    ReplyDelete
  84. @Nancy
    bunch of links..
    didn't get ya.. please explain. :)

    ReplyDelete
  85. can i know where the thumbnail is hosted...?

    ReplyDelete
  86. @manS - If you upload an image(thats what normally everyone does) via the blogger post editor, it will automatically generate a thumbnail which will be hosted on google servers. If you use an external image,then the same full size external image will be used for the thumbnail..

    ReplyDelete
  87. I installed this Related Post with Thumnails yesterday. And I knew that some images with flicker image address are also displayed with related posts. It's funny and good!! :)

    Thanks for providing beautiful widget.

    ReplyDelete
  88. @zizukabi,
    yes i had modified it a little bit to include external images.. :)

    ReplyDelete
  89. @Aneesh - No problem about the updates. I'll get writing as soon as possible about this new feature, and will update the other post shortly.

    Glad to see you're using Google Code for your scripts - it's far more reliable, and free to boot. I only wish we could host and serve Flash files from there - I have to pay for reliable hosting for this as G-code won't serve Flash in the same way :(

    Thank you for the permission to modify - I'm redesigning my site and saw an awesome WP feature which I'd hoped to recreate, so your script will be very handy for this purpose. Once I've done, I'll let you see a demo and send over the script in case you'd like to use yourself.

    Best wishes,

    Amanda

    ReplyDelete
  90. I've tried about 3times (granted I'm a total html noob) but I can't get this to work! I looked for the
    (div class='post-footer-line post-footer-line-1') and alt code, didn't find it and then tried posting the second portion after the (data:post.body/) tag but still nothing.

    Any other ideas?

    ReplyDelete
  91. @Amanda,
    yea G-code doesn't support other files.. may be mainly because it may get misused..

    btw why don't you get some hosting from godaddy or hostgator or bluehost or something like that.. Amazon is too costly rite?

    looking forwart to see your new design..

    Regards
    Aneesh

    @Stuff On My Blog,
    do you label your posts?? The recent posts are fetched using the labels of the current post..

    ReplyDelete
  92. This is super. I can now say goodbye to linkwithin

    ReplyDelete
  93. Hi,

    I mean I can't find either links on point 3.
    Thanks.

    ReplyDelete
  94. @Nancy ,
    if you cant find any of those, the find
    <data:post.body/>
    and paste the related posts code snippet of step 3 below that.

    ReplyDelete
  95. @Nancy ,
    i think that you didn't expand the widget templates. Check that option from your Edit HTML page and try again..
    If you still cant find any of the two lines mentioned in Step 3,the find
    <data:post.body/>
    and paste the related posts code snippet of step 3 below that.

    ReplyDelete
  96. Thanks, I was looking for this. You're a genius!

    ReplyDelete
  97. You just used Linkwithin script why you don't say that in your article ???

    ReplyDelete
  98. @LeBlogger ,
    please look into it before you post something like this. This is not the link within script or some copy of it.. I have coded it myself..

    Linkwithing uses different algorithms.. Mine is based on the post labels, and will work with blogger only.

    ReplyDelete
  99. is it possible to get more than 5 related posts

    ReplyDelete
  100. @Admin,
    yea you can increase the count..
    Follow Step 4 and if you want you can change max-results=6 in the code..

    By default 6 posts are fetched from each label and 5 of them are displayed.

    ReplyDelete
  101. Ok! Got it! Thanks alot! <3

    Love this widget :).

    ReplyDelete
  102. How it is possible that in my Google analytics it counts as Linkwithin referel.
    And how it is possible that sometimes it shows only posts titles without images.
    More over it looks, exacly the same as Linkwithin widget ?

    Anyway, Thank you for this great hack. very useful i will link to it.

    Can u make it show related posts ramdomly ?

    ReplyDelete
  103. Hallo Aneesh,
    I still don't find the line div class='post-footer-line post-footer-line-1' in my blog :(

    What can I do? please help me!

    bye, salomé

    ReplyDelete
  104. Finally I got it! Thank you! :)
    Great widget!

    ReplyDelete
  105. its not working
    i tried this one
    i followed the total intructions
    no errors
    but
    these related posts are not showing under any post

    ReplyDelete
  106. @Soufiane LeBlogger
    you might have been using linkwithin earlier and that might be old data..
    As you can clearly see from the code,it has no linkwithin references and this depends fully on blogger feeds,media thumnails and post images..But surely it was inspired by linkwithin.

    Can you show me a page where the image is not displayed and just the title.. Because i haven't seen of such a situation till now and i would love to fix it if i know where it is(so that i can figure out what has gone wrong)..

    I may try to make randomness rather than using the latest ones in the next update..But it may slow down the widget.Blogger can't provide a randomly ordered feed for me..So if i have to create randomness i will have to fetch more posts from the label.. i will try to include it soon if possible..

    ReplyDelete
  107. @Salomé
    nice to see that you figure it out by yourself..:)
    @viswanath
    you might not be labelling your blogger posts.

    ReplyDelete
  108. It don't works. I have done it exactly but nothing appears.

    ReplyDelete
  109. Thank you for your answers and explinations, you're really nice man thanks.

    ReplyDelete
  110. thank you for information..

    http://getfilesong.blogspot.com/

    ReplyDelete
  111. does it support video thumnails,and can it be modifed to show vertical?

    ReplyDelete
  112. sorry this doesn't support video thumbnails and it can't be made unless blogger automatically adds a media thumnail for the video uploaded.I don't know if blogger adds media thumbnails to videos uploaded via blogger post editor.If they do,then this widget will display the thumbnail.

    ReplyDelete
  113. don't work here: dokupictures.blogspot.com
    and i don't know why?
    please help...
    greets

    ReplyDelete
  114. ok, it works :)
    thanks for this widget

    ReplyDelete
  115. i have 3 questions:
    can i remove or change the color of the lines beetwen thumbnails? (they are visible when i use firefox, but when i use chrome - they aren't visible)
    can i change font of the posts title below the thumbnails (i've changed css code, but it doesn't work)?
    and this wigdet does not work in every post. why?
    thanks for reply

    ReplyDelete
  116. @Dominik Kulik
    to edit the separator colors you will have to recode the js

    now you can change font using css (just change relatedthumbs20.js to relatedthumbs21.js)

    the widget grabs related posts from labels.So if the post has labels which contain other posts,then it will be displayed and otherwise not..

    ReplyDelete
  117. thanks
    yes, post has labels which contain other posts, but the widget doesn't show

    ReplyDelete
  118. @Dominik Kulik,
    can you show me the link?

    ReplyDelete
  119. http://dokupictures.blogspot.com/2009/09/342.html
    label to this post http://dokupictures.blogspot.com/search/label/czarno-bia%C5%82e%20/%20bw%20photos

    ReplyDelete
  120. @Dominik Kulik,
    its because of the / in the label name and it needs to be escaped. will let you know if i find a fix for this..

    ReplyDelete
  121. so, i had to replace the '/' mark into something else.
    you can't go to: 'yourblog.blogspot.com/feeds/posts/default/-/label' if there is '/' in label.
    now the widget works great, and once again thanks for your help

    ReplyDelete
  122. I love this widget and thank you for offering it...May I ask a question however........Does it take a bit of time for it to start working???? I have my posts labeled but I'm not yet seeing any related posts showing up...Thank you for any assistance you can offer....

    ReplyDelete
  123. hi! this is a great hack! QUESTION! How do I get it to show on my main blog page? It only shows up on my individual post pages. www.julujewelry.com

    ReplyDelete
  124. @Penny - It wont take time.

    @Stephanie ,please refer my previous comment(in reply to ladyviral) about removing b:if conditions . Here is a link to the same It will let you display it everywhere..I personally didn't like the idea of displaying it everywhere..So i applied some constraints so that it wont show up on non-post pages.

    ReplyDelete
  125. I've tried 3 times and I keep getting this: 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 element type "html" must be terminated by the matching end-tag "".
    Help!

    ReplyDelete
  126. I love that it now supports external images. ¡Thank you so much!

    ReplyDelete
  127. Hi, I can't get this to display and I think it would be really good for my blog.

    http://www.trainingwithinindustry.blogspot.com

    ReplyDelete
  128. @Bryan
    you should label your posts for this to work.. (related posts are fetched from labels)

    ReplyDelete
  129. Very cool hack! I got everything implemented but had a question. Is there a way to change the default image to another picture? Also where can you change where it says "Related Posts" to something else?

    Thanks!

    ReplyDelete
  130. @Dave@The Home Garden ,
    you can change the title Related Posts to anything that you like (Read Step 5 :))
    But to change the default image,you will have edit the js file and upload it on your own.

    ReplyDelete
  131. Oops! I must not have read that line! Thanks it works great. Also I added the recent post widget to the sidebar. It works great too.

    Thanks again!

    ReplyDelete
  132. I hate editing template, hope can use Blogger layout gadget

    ReplyDelete
  133. Is it possible to put this outside of the post widget, like say in the page footer or header? It seems to not show up elsewhere. I tried adapting it myself, but it just leads to format errors...

    ReplyDelete
  134. nice widget

    i have no idea how to changed css to mtch format with my blog

    my blog is in black format

    http://gmaseven.blogspot.com/

    ReplyDelete
  135. I just implemented all of this, and nothing happened.

    any suggestions?

    thanks,

    http://spartytunes.com

    ReplyDelete
  136. @Faizal Rahman ,
    sorry i cant use a gadget for this one :)
    @Faizal Rahman ,
    that will come up in the next version of this script.
    @KAPUSO ONLINE BLOGSPOT ADMIN ,
    there are 3 lines in the first part of the code
    color:black; this line determies the color of the text displayed
    and the background of the link(on hover) is determined by the line background-color:#d4eaf2;
    you can pick up a better color using photoshop and change it to the way you want.
    @Jon,
    i don't see these codes on your blog..

    ReplyDelete
  137. Hello Aneesh,

    Thanks for this hack. I dont know how i missed this earlier. Anyways i have one question though. How can i change font size and weight of header of this widget. For me it is too big :(

    ReplyDelete
  138. @Hetal,
    you can change the size of the widget titlle by editing the part which looks like
    #related-posts h2{
    font-size: 1.6em;

    ReplyDelete
  139. Hi,
    I can't get this to work although I think I installed correctly. Did have Link Within before and I'm not sure I managed to find all the code and clean it out, if that makes any difference.
    Help appreciated please!

    ReplyDelete
  140. Thank you for developing this fantastic widget.
    Just one question - what is the font-type you use in the widget on your blog? (i.e. the font below the thumbnail pic "Link to me for blogger" etc)
    Thanks

    ReplyDelete
  141. Could you pls take a look onto my test blog? It does not show images (they are uploaded with Windows Livewriter). On my "real" blog I also use WLW and upload the images to my own FTP/HTTP so I guess they also would not show up?
    Test

    ReplyDelete
  142. Aneesh greetings, congratulations on this widget and I hope you like my tutorial in Spanish "thumbnails Related tags":)

    ReplyDelete
  143. @Francesca ,
    which blog did you try it on?
    @Lindsay,
    it takes up your blogs font.Sets the font size to 12px.
    @Mario Ruprecht,
    you have messed up the code :) thats y.. :) it should look like this.
    @Gem@,
    ya ya i understood every bit of it.. :P Google translator is great :)

    ReplyDelete
  144. i followed these above steps but i didnt get this widget on my blog
    my blog address is

    http://nanoguns9.blogspot.com/

    ReplyDelete
  145. @Aneesh
    obviously I messed the code up because I, thank you very much for this hint. It looks great now.

    Nevertheless one question: Some of my headlines use very long words so they qre witten over the boundaries of the link rectangle. Any ideas how to avoid this?

    ReplyDelete
  146. Another one: Could we customize somehow the "No Image" image or do I need to host the JS code on my own server then?

    ReplyDelete
  147. This is just great. I host your script on my own server and changed it a bit to fit my needs. Thanks again for this geat piece of Blogger addon ;-)
    Take a look

    ReplyDelete
  148. Hi Aneesh, it is possible to exclude some label from the related post, for example i have labeled a post with A and B, and I want the related post just related to B and exclude A.

    ReplyDelete
  149. @Mario Ruprecht ,
    i was a lil late, and you figured it out all by yourself.. :)
    @Nathan ,
    if its a single label then it would be possible.But if you are planning to exclude different labels on different posts,then i don't think it would be possible
    @viswanath ,
    try switching to full feed instead of summary feeds.

    ReplyDelete
  150. once again i would say thank you for your work. it is working in my place

    Best regard

    Blogger template place
    www.bloggertemplateplace.com

    ReplyDelete
  151. Excellent work. I am going it Thank you very much to use in my blog and greetings

    ReplyDelete
  152. Aneesh thanks for getting back to me on my previous question. I have increased var maxresults to 7, but still only 5 show, Even though I have 7 posts with the same label. Should I be changing something else aswell? thanks

    ReplyDelete
  153. @Lindsay,
    in the code snippet of step three you can modify this value max-results=6 .This defines the number of posts fetched from each label.

    ReplyDelete
  154. It's greate tool! Thank you so match to share this.

    ReplyDelete
  155. thankyou man it is working perfectly no complains from my side 5 out of 5

    ReplyDelete
  156. Hey Aneesh, great work with the widget, its just like LinkWithin's but fully customisable.

    One question, how do you change the "No Image" image?

    ReplyDelete
  157. @bem69,
    you will have to modify the js file for that to happen.

    ReplyDelete
  158. Hello, I implemented this widget but I have a small problem, I would like to put the sources of the titles of related posts that were smaller and recognize case-sensitive, as you have your to your blog, and also the title of the widget out in lowercase, because I get my all caps.
    Sorry as I express myself but I am using a translator and not English. I speak Spanish.
    Will be necessary to accommodate the script on my server? Or can we trust that this will not crash?
    Thank you very much for everything and very good post!

    ReplyDelete
  159. @k_nelita ,
    i didn't understand the first part. But you can surely trust the script servers.They are hosted at googlecode.com on google's Servers.So they wont crash.

    ReplyDelete
  160. @k_nelita

    I believe I understood your question. You can decrease the fonst size in the Javascript so you need to modify it and host it somewhere else, e.g I reduced it to "font-size: 10px;". You can also try "text-transform:capitalize;" in they style in order to get every word with a capital letter first letter instead of all in capital letters.

    Regarding the widget headline: you can change the layout to your needs in the H2 section of the CSS part described by Aneesh above, so you could also use a text-transform capability.

    So, the first thing you can change in the script, second one in your template.

    Hope this helps! If changing font size is often required Aneesh might introduce a variable for it?!?

    I have my version of this great script running and I'm totally happy. Thank again!

    ReplyDelete
  161. Thank you very much Mario Ruprecht Aneesh and I am going to try to modify the script as I advise and host it on another server, although I am not very knowledgeable on the subject, but very persistent ja ja
    Again I apologize for my bad English;) (the translator)

    ReplyDelete
  162. Hi Aneesh, thanks for all the wonderful work you do! I've used a few of your widgets and they work perfectly but I can't get this one to work. I'm not greatly experienced with the code so I must have done something wrong. If you can help that would be great. My URL Thanks Chris

    ReplyDelete
  163. @Chris ,
    you figured it out rite? :)

    ReplyDelete
  164. Hello there ! Been looking on all comments and cant make it work !
    I would like to make the widget come up in the front page of my blog, not only in a single post page... i have removed the:
    b:if cond=

    and

    b:if

    or at least i think so that i did it right, but cant get it to work..:-(
    Can you please give me a hand ?
    Please take a look at my blog: http://linuxvidalivre.blogspot.com

    Im trying too to get rid of linkwhithin widget, already deleted it...
    Thank you very much and ill be waiting for your comment !
    Cheers !

    ReplyDelete
  165. Well, i have just tried a lot of things... i admit im no html guru, but cant get it to work even if i copy/paste the code "as is"...It doesnt show in the main page nor in any of the individual posts...

    ReplyDelete
  166. Just to add...i got it to work "as is"... but still cant get it how to work in the front page too.
    Could you please post an example of how it should work showing the b:if cond removed, so that i can understand better ?
    Thanks in advance.

    ReplyDelete
  167. @Maquina de Café
    you have to remove only 4 lines from the code
    they are
    1.the bif line just below <!--Related Posts with thumbnails Scripts and Styles Start-->
    2.the b:if line just above <!--Related Posts with thumbnails Scripts and Styles End-->
    3.B:if line just below <!-- Related Posts with Thumbnails Code Start-->
    4.The b:if line just above <!-- Related Posts with Thumbnails Code End-->

    Delete just these 4 lines and you will get it on every page.

    ReplyDelete
  168. @Aneesh
    Thanks for your time and patience one more time.
    I did it like you said, but it still doesn't work on the front page, don't know why. Its true that i have posts that have no images... but in that case it would show "no image" and thats not the case, it just doesn't show nothing at all (im talking about the posts that appear when you go to the front page).
    When i click on an single post, some posts show the "related posts" widget and other posts don't show the widget at all.
    Just that you might want to know about how it worked for me... don't know what else to do, maybe i just should paste the code as is :-(
    Anyway thank you very much, and ill stay tuned if there is any other way to make this work.
    Cheers !

    ReplyDelete
  169. Hi! This looks so cool. However, I'm having problems. I followed your instructions exactly and posted the code without changing anything and nothing is showing up.

    ReplyDelete
  170. Aneesh,

    This code just worked fine in my first two posts, not in other posts.

    Could you advise as what is wrong?

    http://samasongs.blogspot.com/

    ReplyDelete
  171. It's very useful, better than LinkWithin widget and others. Congratulationas my friend. take a look:

    http://tutorialparatudo.blogspot.com/

    ReplyDelete
  172. Great... :) And Thank you.

    I will try it to my site...

    ReplyDelete
  173. Good post, thanks i'll use it ;)

    ReplyDelete
  174. Thank you! Works: http://hiphopisread.blogspot.com/

    ReplyDelete
  175. I wanted it to appears on every page but I am having problems

    The conditional tags look like
    < b:if cond='data:blog.pageType == "item"' >
    and
    < /b:if > (had to put spaces in)

    if you remove these 2 lines from the code snippets in step 2 and step 3,then you will have the widget on every page of the blog..

    It appears twice in the 3 - but if you removed the < /b:if > I get an error.

    ReplyDelete