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.
STEP : 2 - CTRL + F to enable search box and search for the </head> tag.
STEP : 3 - Copy and Paste below code just above </head>
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.
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 HTMLSTEP : 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 == "item"'>
<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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
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 !! :)
Hi,
ReplyDeleteIt 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.
Nice Article..I have applied on my blog. Visit - http://salmankhanbeing.blogspot.com/
ReplyDeleteThanks so much, it's works!!
ReplyDeletethnx (y)
ReplyDeletenice post, it worked on my blog. thanks :)
ReplyDeletehttp://ayokepo.blogspot.com/
or
http://eka-designs.blogspot.com/
Nice widget I have applied on my blog http://www.careerfound.blogspot.com
ReplyDeletethanx
Hi everyone, I know its me but I cannot get it to show my blogger blog is at http://herbalsurvival.blogspot.com
ReplyDeleteI really want to get this working Any Ideas?
God Bless, The Herbal Survivalist
Hello,
DeleteContact me with the detail what error are you getting. (Use contact form)
Hi , thanks for sharing this with us . I just have a quick question, how do you set a default image for post without photo?
ReplyDeleteHello,
DeleteWhich default image of post are you talking about? In related posts? It coming through its javascript.
Hi! I cannot find the second link in my HTML. Any idea what I am doing wrong?
ReplyDeleteHello,
DeleteTry to find this one : <footer class='post-footer'> and then follow next steps above.
yes i have same problem.
DeleteThnx (Y)
ReplyDeleteThis is not working for me....how can I tell whats going on and why its not working?
ReplyDeleteHello,
DeletePlease contact me with the detail about an error occurred. (Use contact form)
Hey thanks, it works great on my blog, I will put up a link back to this post as a token of appreciation, cheers!
ReplyDeleteThank you :)
DeleteHello, 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?
ReplyDeleteThanks for this, very helpful to me. more power
ReplyDeleteThanks a Lot !
ReplyDeletegossip lanka
Is there any way to make the thumbnails cropped instead of being squished into a square?
ReplyDeletenice post,,thanks u bro...
ReplyDeleteIt works fine but only 4 thumbnails show up - www.cookingandme.com
ReplyDeletehello , thanks it works . But somehow on my certain post it only showing 5 related post instead of 6 . can you help me ? ?
ReplyDeleteHi this widget installed well but I cannot see the post titles below. Any help?
ReplyDeletehttp://burningflameblog.blogspot.com/2013/08/a-certain-ratio-i-like-to-see-you-again.html
Thanks in advance.
Add this above </head>
Delete#related-title {
font-size: 14px !important;
}
Thanks a lot Nitin. Works fine now. :)
ReplyDeleteHi, 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! ):
ReplyDeleteHello, 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?
ReplyDeleteExactly where are they supposed to go? Top right tower, bar at the bottom?
ReplyDeleteThank you! It was just what I needed. I added it on my blog ---> http://terebol.blogspot.com/
ReplyDeleteThank you very much, it work very well in my website http://www.biodivn.com/ but I want the title of article more lenght
ReplyDeleteits working for me.. thanx bro..
ReplyDeletewww.galatawoods.blogspot.com
Thanks, I`ve trying here http://haviafotokopi.blogspot.com/2014/10/jual-mesin-foto-copy-canon-ir-2535.html
ReplyDeleteHi, I've tried adding it to here but it doesn't seem to be working:
ReplyDeletehttp://www.lipstickarsenal.com/
Thanks for your help!
Hi, I cant find div class='post-footer' or footer class='post-footer' do i need to expand every widget to find it?
ReplyDeleteThank you So Much I am Done Now
ReplyDeleteIt really works no need to add widget such as Nrelate and Link Within Thank you so much.
ReplyDeletehttp://thesassyarchitect.blogspot.com/
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?
ReplyDeleteIt can be done by editing into the CSS code :
Delete#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.
Works on my blog but the thumbnail images look compressed. Anything I can add to the code?
ReplyDeletehttp://www.faithistorment.com
Tried it but it dint work on my blog http://nairobitrendingnews.blogspot.com/
ReplyDeleteThis worked like a charm! Thank you so much!
ReplyDeletehow do i set it up to show text sumary also?
ReplyDeletethanks bro
ReplyDeleteThank you, kind blogger.
ReplyDeleteit didn't work for my blog, what is the minimum post
ReplyDeleteI Cant add this too my Blog Please Help.
ReplyDeletehttp://celebrityhdwallpapers.net
it works... nice post. btw how can compress its word size.
ReplyDeletehave a look... http://www.govtjobnotification.in/
Why isn't working for me sir?
ReplyDeleteno udentified error and can be saved.
you can see it at: Dewa Inside
i am sorry my bad. it's working now.
Deleteit doesnt work for me...
ReplyDeleteIt works! Thank you so much!
ReplyDeleteVisit my blog .here . Thanks again!
hey its not working for me
ReplyDeletethanks friend for this useful widget.
ReplyDeletei installed it on
http://amezingtech.blogspot.com
and http://ddfreedish.blogspot.com
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!
ReplyDeleteThis 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?
ReplyDeletePlease check my blog, http://fayezhadans.blogspot.ca/
this is great I have installed and it works, thank you for sharing this
ReplyDeleteYour 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.
ReplyDeleteThanks for a useful code.
done i invented one more best thing in it go n see http://broadbandtariff.net
ReplyDeleteThank you for this post, I applied it on my blog http://heygladz.blogspot.com/
ReplyDeleteRelated 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/
ReplyDeletethis is what i'm looking for,
ReplyDeletethank you :)
Android's ID
In my blog http://www.vdotips.com/ its not working please help i follow al step
ReplyDeleteThanks it works fine, but how do i make it appear on mobile view ?
ReplyDeleteIt worked well for me. Thank you for your help.
ReplyDeleteits Not working on my blog, http://paperpkinfo.blogspot.com/
ReplyDeleteanyone can help, i followed all the step correctly ,
This comment has been removed by the author.
ReplyDeleteYES! 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!
ReplyDeleteHi, it's not working for me. By the way, how does it know which other posts are related ? Thanks.
ReplyDeletehttp://beebeecooks.blogspot.com/
Hello,
DeleteI don't know why it isn't working for you. and its works based on labels.
Thanks.
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
ReplyDeleteThanks so much.
Hi,
Deletethere 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.
Thanks a lot man :)
ReplyDeletevisit my blog http://www.trixhub.net/
thank you so much
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.
ReplyDeletehttp://www.infotechlife.com
Thank a lot Nitin,
ReplyDeleteI 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?
Hi Nitin this widgets not showing in my blog here: http://lafamiliabeach.blogspot.com/
ReplyDeleteThank you very much . you are awesome God bless you.
ReplyDeleteThank you
ReplyDeletevisit here
http://computeruptade.blogspot.com/
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"
ReplyDeleteThank"
oh cool, I try ya ..
ReplyDeletei have tried this code. but still its not showing related posts.. how to relate posts?? my website is www.droidfeed.org
ReplyDeleteThanks man! but it's not showing on PC view.
ReplyDeletehello 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 :(
ReplyDeleteIt worked for me under this code right after this one
ReplyDeleteThank you so much.
you are the best! It worked!!!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteLove this very much! Better than using 3rd party linking!
ReplyDeleteBut 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!
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:
Deleteobject-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! ^_^
Post Master, is there a way to customize the code so that the script will ignore certain labels?
DeleteLove how the tutorial is straight to the point, thanks!
ReplyDeletehttp://www.theticblog.com/ Working on my blog, took me only 2 mins to add.
thanks friend i added and its work
ReplyDeleteThanks. Its Perfectly worked for me as I wanted it. Thank you very much.
ReplyDeletehttp://pricelistbd57.blogspot.com
It's Really good article for new blogger.Keep it up Sir..
ReplyDeletehttp://apkdownloadever.blogspot.com
thanks a lot its working thanks again
ReplyDeletehttp://no1worldlifestyle.blogspot.com/
Thanks guys thats a nice work. Im using it. It helped me.
ReplyDeletehttp://www.e-priceinbd.com/
This comment has been removed by a blog administrator.
Deleteworking good... i have succesfully add related post...
ReplyDeletevery good tutorials...
look out here of this post implementation
ReplyDeletehttp://social-bug.blogspot.com/
Thank you very much for your detailed and described article. This is definitely help the new bloggers like me.
ReplyDeleteTHANKS
I couldn't it visit my site https://www.hindimeshiksha.blogspot.com
ReplyDeleteFriends 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
ReplyDeletethanks but it works only on certain tags....why?
ReplyDeletethanks in advance
mine is now working
ReplyDeleteHi how do I change the name? My blog is from brazil: http://kotakujogos.blogspot.com.br/
ReplyDeletethis option is not working on my website
ReplyDeletewww.teksol.in
Please help me
Placed the code and done all the trouble shooting, still can't see the related posts. Any help please.
ReplyDeletehttp://homemaker-diary.blogspot.co.uk
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