How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot

Related Posts Widget with Thumbnails for Blogger - it is must have widget for blogger to show related posts of current post to your readers. it will help you in many ways and first thing is that it will help you to increase the page views and reduce bounce rate of your blog. along with these 2 and enough advantages it also looks awesome.

Also see : Use A Drop Cap Large First Letter In Posts On Blogger


How to Add Related Posts with Thumbnails to Blogger ?

STEP : 1 - Go to Blogger Dashboard > Template > Edit HTML
STEP : 2 - CTRL + F to enable search box and search for the </head> tag.
STEP : 3 - Copy and Paste below code just above </head>

<!--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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Important :
To change height or width of the widget you can edit red colored value in above code 100px.
To change color and size of related posts titles, you can edit Blue colored value.
Remove Green colored lines, if you want related posts to be displayed in homepage as well.

STEP : 4 - Find the following code in your blog's HTML using CTRL + F, you might get the result of the same code two times then you can stop at the second one.

<div class='post-footer'>

STEP : 5 - Now, just above it, copy and paste below code.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Edit value 5 in maxresults=5 with the number of posts you want to be display. Remove green colored lines if you want related post to be display on homepage too.

STEP : 6 - Save the template !

You're Done !! :)

109 comments:

  1. Hi,
    It worked for me. Thanks a lot!
    I have used the maxresults=4. But the image size has become small. Where can I increase the image size?
    Please refer www.itssizzling.com to have a clear picture.

    Thanks.

    ReplyDelete
  2. Nice Article..I have applied on my blog. Visit - http://salmankhanbeing.blogspot.com/

    ReplyDelete
  3. nice post, it worked on my blog. thanks :)

    http://ayokepo.blogspot.com/
    or
    http://eka-designs.blogspot.com/

    ReplyDelete
  4. Nice widget I have applied on my blog http://www.careerfound.blogspot.com

    thanx

    ReplyDelete
  5. Hi everyone, I know its me but I cannot get it to show my blogger blog is at http://herbalsurvival.blogspot.com
    I really want to get this working Any Ideas?
    God Bless, The Herbal Survivalist

    ReplyDelete
    Replies
    1. Hello,

      Contact me with the detail what error are you getting. (Use contact form)

      Delete
  6. Hi , thanks for sharing this with us . I just have a quick question, how do you set a default image for post without photo?

    ReplyDelete
    Replies
    1. Hello,

      Which default image of post are you talking about? In related posts? It coming through its javascript.

      Delete
  7. Hi! I cannot find the second link in my HTML. Any idea what I am doing wrong?

    ReplyDelete
    Replies
    1. Hello,

      Try to find this one : <footer class='post-footer'> and then follow next steps above.

      Delete
    2. yes i have same problem.

      Delete
  8. This is not working for me....how can I tell whats going on and why its not working?

    ReplyDelete
    Replies
    1. Hello,

      Please contact me with the detail about an error occurred. (Use contact form)

      Delete
  9. Hey thanks, it works great on my blog, I will put up a link back to this post as a token of appreciation, cheers!

    ReplyDelete
  10. Hello, the rectangle images look weird, like pressed to be square instead of cut square, is there any part of the code I can change for that to be fixed?

    ReplyDelete
  11. Thanks for this, very helpful to me. more power

    ReplyDelete
  12. Is there any way to make the thumbnails cropped instead of being squished into a square?

    ReplyDelete
  13. It works fine but only 4 thumbnails show up - www.cookingandme.com

    ReplyDelete
  14. hello , thanks it works . But somehow on my certain post it only showing 5 related post instead of 6 . can you help me ? ?

    ReplyDelete
  15. Hi this widget installed well but I cannot see the post titles below. Any help?
    http://burningflameblog.blogspot.com/2013/08/a-certain-ratio-i-like-to-see-you-again.html

    Thanks in advance.

    ReplyDelete
    Replies
    1. Add this above </head>

      #related-title {
      font-size: 14px !important;
      }

      Delete
  16. Thanks a lot Nitin. Works fine now. :)

    ReplyDelete
  17. Hi, I've followed all the steps and removed those in 'green', but it is still not showing on my home page. Only showing when I clicked on the post. Help please! ):

    ReplyDelete
  18. Hello, I'm having a problem on installing the code. I can't find the code < div class='post-footer'> and . I am using a custom template on my site. Can you please help me?

    ReplyDelete
  19. Exactly where are they supposed to go? Top right tower, bar at the bottom?

    ReplyDelete
  20. Thank you! It was just what I needed. I added it on my blog ---> http://terebol.blogspot.com/

    ReplyDelete
  21. Thank you very much, it work very well in my website http://www.biodivn.com/ but I want the title of article more lenght

    ReplyDelete
  22. its working for me.. thanx bro..

    www.galatawoods.blogspot.com

    ReplyDelete
  23. Thanks, I`ve trying here http://haviafotokopi.blogspot.com/2014/10/jual-mesin-foto-copy-canon-ir-2535.html

    ReplyDelete
  24. Hi, I've tried adding it to here but it doesn't seem to be working:
    http://www.lipstickarsenal.com/

    Thanks for your help!

    ReplyDelete
  25. Hi, I cant find div class='post-footer' or footer class='post-footer' do i need to expand every widget to find it?

    ReplyDelete
  26. It really works no need to add widget such as Nrelate and Link Within Thank you so much.
    http://thesassyarchitect.blogspot.com/

    ReplyDelete
  27. It works. Thank you for sharing this article. My only problem is that the title of the post is incomplete. How can i increase the length of the title?

    ReplyDelete
    Replies
    1. It can be done by editing into the CSS code :

      #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}

      Look for the "height:28px" in above code.

      Delete
  28. Works on my blog but the thumbnail images look compressed. Anything I can add to the code?

    http://www.faithistorment.com

    ReplyDelete
  29. Tried it but it dint work on my blog http://nairobitrendingnews.blogspot.com/

    ReplyDelete
  30. This worked like a charm! Thank you so much!

    ReplyDelete
  31. how do i set it up to show text sumary also?

    ReplyDelete
  32. it didn't work for my blog, what is the minimum post

    ReplyDelete
  33. I Cant add this too my Blog Please Help.
    http://celebrityhdwallpapers.net

    ReplyDelete
  34. it works... nice post. btw how can compress its word size.
    have a look... http://www.govtjobnotification.in/

    ReplyDelete
  35. Why isn't working for me sir?
    no udentified error and can be saved.
    you can see it at: Dewa Inside

    ReplyDelete
  36. It works! Thank you so much!

    Visit my blog .here . Thanks again!

    ReplyDelete
  37. thanks friend for this useful widget.
    i installed it on
    http://amezingtech.blogspot.com
    and http://ddfreedish.blogspot.com

    ReplyDelete
  38. How do you make it show up on mobile as well? Also, is there a way to make the pictures cropped into squares and not squished?? Thanks so much for this tutorial!

    ReplyDelete
  39. This is so cool! The only one that worked for me... Thank you so much! I just want to know though how do you center the related posts?

    Please check my blog, http://fayezhadans.blogspot.ca/

    ReplyDelete
  40. this is great I have installed and it works, thank you for sharing this

    ReplyDelete
  41. Your code very useful dear i don't want to show image with related posts links can you tel me how to remove image option from this code.
    Thanks for a useful code.

    ReplyDelete
  42. done i invented one more best thing in it go n see http://broadbandtariff.net

    ReplyDelete
  43. Thank you for this post, I applied it on my blog http://heygladz.blogspot.com/

    ReplyDelete
  44. Related post widget is great for conversion optimization and user engagement. First it increases traffic and second is lowers the bounce rate of the blog. Any one with great looking related post widget may see the change in traffic before and after using it. Thanks for sharing. http://10-things-and-reasons.blogspot.in/

    ReplyDelete
  45. this is what i'm looking for,
    thank you :)
    Android's ID

    ReplyDelete
  46. In my blog http://www.vdotips.com/ its not working please help i follow al step

    ReplyDelete
  47. Thanks it works fine, but how do i make it appear on mobile view ?

    ReplyDelete
  48. It worked well for me. Thank you for your help.

    ReplyDelete
  49. its Not working on my blog, http://paperpkinfo.blogspot.com/
    anyone can help, i followed all the step correctly ,

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. YES! It worked! There were two div class = 'post-footer' and when I put it before the first, it didn't work. I moved it and it worked. Thank you!

    ReplyDelete
  52. Hi, it's not working for me. By the way, how does it know which other posts are related ? Thanks.
    http://beebeecooks.blogspot.com/

    ReplyDelete
    Replies
    1. Hello,

      I don't know why it isn't working for you. and its works based on labels.

      Thanks.

      Delete
  53. Hi Nitin, can you please have a look at my template to see if I did anything wrongly? I've pasted the template on pastebin here http://pastebin.com/pMMpWZWd

    Thanks so much.

    ReplyDelete
    Replies
    1. Hi,

      there is a mistake in placement of code. re-check step 3. you have to paste that code before </head> Not after the </head> tag.

      Thanks.

      Delete
  54. Thanks a lot man :)
    visit my blog http://www.trixhub.net/
    thank you so much

    ReplyDelete
  55. This post is awesome post and very helpful for me. I have tried for a long time but didn't work it. Finally I have become successfull. Thanks bro! Please feel free to visit my site.
    http://www.infotechlife.com

    ReplyDelete
  56. Thank a lot Nitin,
    I did it on my blog http://sexyhotnud.blogspot.com/. But the problem is I can't increase the amount of my post. I change it to 8 but it's still showing 5 posts. Can you help me with this?

    ReplyDelete
  57. Hi Nitin this widgets not showing in my blog here: http://lafamiliabeach.blogspot.com/

    ReplyDelete
  58. Thank you very much . you are awesome God bless you.

    ReplyDelete
  59. Thank you
    visit here
    http://computeruptade.blogspot.com/

    ReplyDelete
  60. Hi, I've been using your code more months and it was great. All of the sudden, it stoped appearing in my posts, no matter what browser am using. I haven't done any changes to my template. Any ideas what has happened? Only thing visible is a link "Related Posts Widget"

    Thank"

    ReplyDelete
  61. i have tried this code. but still its not showing related posts.. how to relate posts?? my website is www.droidfeed.org

    ReplyDelete
  62. Thanks man! but it's not showing on PC view.

    ReplyDelete
  63. hello everyone! i'm a new blogger i tried to build my blogs by following tutorials especially the CSS coding and edit html but most I tried won't work! like this one! can somebody help me? I want to kill myself :(

    ReplyDelete
  64. It worked for me under this code right after this one
    Thank you so much.

    ReplyDelete
  65. you are the best! It worked!!!

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
  67. Love this very much! Better than using 3rd party linking!

    But yes, I would also love to be able to customize the thumbnail to cropped squares instead of the squished squares... you can see it in my Cosplay Holic blog, on the right side, I have a "monthly top 10" section where the photos are cropped thumbnails instead of squished ones...

    If there is a way to customize the code, please do drop me an email or something! ^_^ Otherwise, loving this very very much!

    ReplyDelete
    Replies
    1. Ok, so after a few hours of tweeking, I added a code to make the thumbnails cropped instead of squished, so... If anyone (or if post master) is interested, just add the code:

      object-fit: cover;

      right after you specify the height and width of your thumbnail (found in step 3). Tried it on my blog and it worked out great! I'll be trying this out on my other layouts as well, hopefully they will turn out well too~

      Again, thank you very much for this widget/code! ^_^

      Delete
    2. Post Master, is there a way to customize the code so that the script will ignore certain labels?

      Delete
  68. Love how the tutorial is straight to the point, thanks!
    http://www.theticblog.com/ Working on my blog, took me only 2 mins to add.

    ReplyDelete
  69. thanks friend i added and its work

    ReplyDelete
  70. Thanks. Its Perfectly worked for me as I wanted it. Thank you very much.
    http://pricelistbd57.blogspot.com

    ReplyDelete
  71. It's Really good article for new blogger.Keep it up Sir..
    http://apkdownloadever.blogspot.com

    ReplyDelete
  72. thanks a lot its working thanks again
    http://no1worldlifestyle.blogspot.com/

    ReplyDelete
  73. Thanks guys thats a nice work. Im using it. It helped me.
    http://www.e-priceinbd.com/

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  74. working good... i have succesfully add related post...

    very good tutorials...

    ReplyDelete
  75. look out here of this post implementation

    http://social-bug.blogspot.com/

    ReplyDelete
  76. Thank you very much for your detailed and described article. This is definitely help the new bloggers like me.
    THANKS

    ReplyDelete
  77. I couldn't it visit my site https://www.hindimeshiksha.blogspot.com

    ReplyDelete
  78. Friends related widget post give a huge response to all blogger. I have used this on and get a huge traffic on http://www.24hoursseo.com

    ReplyDelete
  79. thanks but it works only on certain tags....why?
    thanks in advance

    ReplyDelete
  80. Hi how do I change the name? My blog is from brazil: http://kotakujogos.blogspot.com.br/

    ReplyDelete
  81. this option is not working on my website
    www.teksol.in
    Please help me

    ReplyDelete
  82. Placed the code and done all the trouble shooting, still can't see the related posts. Any help please.
    http://homemaker-diary.blogspot.co.uk

    ReplyDelete
  83. the widget is working right now in my blog. www.reputatustech.blogspot.com. thanks alot will right a post with a backlink of this widget. Really happy now, have been searching since.

    ReplyDelete