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)

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and Click on Expand Widget Templates

2.Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</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-->
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://bloggertipsandtemplates.blogspot.com/2009/09/related-posts-with-thumbnails-for.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://bloggertipsandtemplates.blogspot.com/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</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;

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

var relatedpoststitle="Related Posts";

To change the colors 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.

If you need a demo just check the related post thumbnails below this post.
UPDATE: Fixed the chrome Issue.So if you installed the widget before seeing this,then please update the widget.. :)

86 comments

IEDig said... @ September 9, 2009 at 7:28 PM

IEDig is a social content website where your readers or you can
submit content to. If you have a good story, members will 'Vote' the post
and write comments. As a blog owner, you may want
to make it easy for and encourage your readers to Visit on Your Blog.


Join IEDig.com

[ REPLY ]
Nipun said... @ October 6, 2009 at 8:16 AM

step 3 is not working for me

[ REPLY ]
Praneet Agarwal said... @ October 8, 2009 at 4:32 AM

@nipun

tell me specifically what exact problem you are facing?

[ REPLY ]
aR said... @ October 9, 2009 at 10:13 PM

Good tutorial. Thanks for sharing.

aR
www.banglahacks.com

[ REPLY ]
M Zammi said... @ October 26, 2009 at 4:45 PM

It's not working for me can you be specific like where to put labels? thanks!!!

[ REPLY ]
NiceTimeGo said... @ January 10, 2010 at 10:11 PM

Thank you! It Working in my blog
http://mesotheliomainfo-center.blogspot.com

[ REPLY ]
abuckisabuck said... @ January 23, 2010 at 10:19 PM

Thank You!

[ REPLY ]
Wishvam said... @ June 1, 2010 at 12:58 AM

great tutorial.. got it in ma blog

http://wishvam.blogspot.com

[ REPLY ]
2time4 said... @ June 16, 2010 at 7:15 PM

Don't work in Safari 5 (MacOS)

[ REPLY ]
மணிபாரதி said... @ June 25, 2010 at 12:32 AM

This trick will not work for me

By

www.EllameyTamil.Com

[ REPLY ]
deBela said... @ July 13, 2010 at 4:13 PM

I'm sorry it doesn't work. I'm doing everything correct, but no related posts shown under my publications

[ REPLY ]
✽♥♪∙•●ѕяι∂нαя●•∙♪♥✽ said... @ October 18, 2010 at 4:26 PM

why related posts are not displayed in home page......i want to display related posts on home page also wht i do?

[ REPLY ]
Rahul Bhardwaj said... @ January 22, 2011 at 4:32 PM

great frnd... its working in my blog http://rtechreview.blogspot.com/..... surely it will not work in home page bcz work according to label

[ REPLY ]
Angelo said... @ February 1, 2011 at 7:03 PM

can't find the code in step three... please help! i want to improve my blog.

http://w7xtreme.blogspot.com

[ REPLY ]
Praneet Agarwal said... @ February 3, 2011 at 2:11 AM

@Angelo and all others who are having problem with step no.3 :

Instead of searching the whole snippet, try searching it in part because it may be slightly different for different kind of templates... For example search just "post-footer-line" and you may find it easily.

[ REPLY ]
afypnistis said... @ February 15, 2011 at 10:30 PM

Hello, thanks for the code! One question, Why I can not have more than 5 related posts beneath my article...? I changed the var maxresults= (from 1to7) but after 5 stops!

[ REPLY ]
afypnistis said... @ February 15, 2011 at 10:33 PM

well.. the above issue is happening only to chrome! Any idea? Thx!

[ REPLY ]
Praneet Agarwal said... @ February 19, 2011 at 12:32 PM

@afypnistis: ok.. Let me check the issue...il post the solution asap.

[ REPLY ]
Rian Pramana said... @ March 20, 2011 at 8:06 AM

it's not working for me !!
why is that >>> plz tell me !!!
i tried evry tutorial such as linkwithin and your tutorial but still not worked...

[ REPLY ]
Praneet Agarwal said... @ April 17, 2011 at 5:15 PM

@Rian Pramana send me the link of your blog, where you want to apply this tutorial...

[ REPLY ]
D.V.Ramana said... @ May 26, 2011 at 10:52 AM

Hellow sir,
Recently i was started a blog. I want add related posts widget in my blog. in 3rd step I can't find these two lines in my blog html code.
These two lines are not there.
now how to add this related post widget to my blog. Please solve my problem. Sir here i am leaving my blogs html code. See this and solve my problem
See my blog template sir.
My blog is
http://www.wallpaperworld2010.blogspot.com/

[ REPLY ]
D.V.Ramana said... @ May 26, 2011 at 12:56 PM

Sir I want add related post gadget to my blog. But step 3 lines are not available in my html. observe my blog. http://wallpaperworld2010.blogspot.com/
kindly solve my problem.

[ REPLY ]
Jasminatics Management said... @ May 28, 2011 at 4:45 PM
This comment has been removed by the author. [ REPLY ]
Gowtham said... @ May 30, 2011 at 1:37 AM

Thank you so much for the tutorial, worked pretty well.

[ REPLY ]
Thiago Monteiro said... @ July 2, 2011 at 4:45 PM

Hi there, I can't make it work on my blog (myhalfmango@blogspot.com) can you give me an e-mail so I can send you the html code?

thank you

Thiago Monteiro
myhalfmango.blogspot.com

[ REPLY ]
Praneet Agarwal said... @ July 6, 2011 at 3:52 PM

@Thiago Monteiro: Mail me at netpassion4u@gmail.com

[ REPLY ]
Rahul Bhardwaj said... @ July 14, 2011 at 4:23 PM

hey thanks frnd...its perfectly working in my website http://rtechreview.info/

[ REPLY ]
Lachesis said... @ July 17, 2011 at 7:53 PM

great work!!!! thanks for the tutorial! :)

[ REPLY ]
1cfba4b4-a2d2-11e0-bf63-000bcdcb8a73 said... @ July 25, 2011 at 6:40 PM

I used your recent posts with thumbnails widget when i was on blogger and that was my favorite widget . I installed random posts widget in one of my test.
Joomla website developer | Joomla website development

[ REPLY ]
mylastof said... @ July 26, 2011 at 12:24 AM

::
thanks a lot :D

[ REPLY ]
AlienPet13 said... @ July 26, 2011 at 11:57 AM

Hrm... didn't work for me either but I don't have the line...

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

Instead, my code looks like this...

div class='post-footer-line post-footer-line-'/
div class='post-footer-line post-footer-line-2'

Tried adding the "1'" to my first line but nothing changed and the related posts aren't showing. I'm using a modified "Host Hub" template. The site is http://alienpet13.blogspot.com

Any ideas?

[ REPLY ]
AlienPet13 said... @ July 26, 2011 at 12:10 PM

DERP!!! Got it working... here's what I did.

I got no line "div class='post-footer-line post-footer-line-1'" but I found one that reads... "div class='post-footer'" so I placed the code on the next line and it works great now! I realized that I was looking at a closing tag and scanned up to the opening tag... Duh! lol!

Thanks for this great and useful code! :)

[ REPLY ]
AlienPet13 said... @ July 26, 2011 at 12:15 PM

Hmmm... not it's not working again... I give up.

[ REPLY ]
Abhishek (DOH) said... @ July 29, 2011 at 5:10 PM

Good Tuotorial Thanks For Sharing
Dad-Of-Hacking.blogspot.com

[ REPLY ]
1onederwoman said... @ August 12, 2011 at 10:50 AM

hi there...
i'm using linkwithin at first .. and now i've tried your steps... (TQ by the way)
but "linkwithin' still shows up... i've deleted the widget already.... and still no related post thumbnail... ;-(
plz help..
Thanks...

[ REPLY ]
1onederwoman said... @ August 12, 2011 at 10:53 AM

BTW.. this is my blog... i'm totally new though... thanks...
http://shortretreat.blogspot.com/

[ REPLY ]
≈[kyle-blanchard]\[blank164]≈ said... @ September 6, 2011 at 8:07 AM

@deBela Not work for me too. http://b-kyle-c.blogspot.com

Could the author please maybe publish it as a widget we can add from google search in the add content section of the layout portion of blog managment? That would let us HTML nonknowers help to use this great feature. Thanks kindly for your understanding that i'd use the related posts if i could get working. thanks again, Kyle

[ REPLY ]
Stiv said... @ September 8, 2011 at 12:41 PM

I really liked your article. Keep up the good work.I love bondage porn

[ REPLY ]
Salil said... @ September 11, 2011 at 5:42 PM

Thats awesome buddy, just that the thought of inserting 100+ images in my posts is driving me crazy now, is there an option to hack something on this. U got me right?
-Salil
http://www.parasitech.net

[ REPLY ]
Ali Zeeshan said... @ September 22, 2011 at 12:31 AM

Thants coool thanks,, i was looking for it... News Update

[ REPLY ]
how to..why.. said... @ September 22, 2011 at 3:28 AM

INTERESSTING THANKS

[ REPLY ]
lady sue said... @ October 6, 2011 at 9:50 AM

hi there... how to chage the default no image to image from our blog?

[ REPLY ]
MsAprilFish said... @ October 9, 2011 at 7:31 PM

It's not working :( I did step 1 and Two, but it's not working... what can I do?

[ REPLY ]
pro-live said... @ October 17, 2011 at 3:47 PM

thank you, nice work

[ REPLY ]
Wiki Blogger said... @ October 19, 2011 at 9:26 AM

Thanks for sharing.... I was looking for it to replace old version. All in One SEO Pack for Blogspot

[ REPLY ]
phantom said... @ November 18, 2011 at 8:42 PM

So i got this working and it's not exactly an issue but if my maxresults is too low and it dont fit exactly the space under the post, the related posts just show an empty space instead of using all the space under the post. Is there anything i can change in the code to get it using 100% of the space under the post?

[ REPLY ]
Cado188BET said... @ November 29, 2011 at 12:25 PM

thank you, nice work for my blog

[ REPLY ]
deshi_Bit said... @ December 11, 2011 at 5:07 AM

it's not working for me !!
why is that >>> plz tell me !!!
i tried evry tutorial such as linkwithin and your tutorial but still not worked...!

My Blog URL - http://deshibit.blogspot.com

[ REPLY ]
Missoyaa said... @ January 4, 2012 at 10:16 AM

Hi, it's not working on my blog but i'll try it again. Thanks :)

[ REPLY ]
Blackberry Repair said... @ January 17, 2012 at 3:16 AM

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Cell phone repair mississauga
iphone repair mississauga
Cell phone unlocking mississauga
mississauga iphone repair

[ REPLY ]
Denning said... @ January 17, 2012 at 11:26 AM

thx be for

my blog:http://denning354.blogspot.com

[ REPLY ]
gohost said... @ January 18, 2012 at 12:27 PM

Very informative article you have got here. I love reading this kind of stuff. This is truly a great read for me. I hope to see more articles from you.web hosting companies

[ REPLY ]
Akshay said... @ January 18, 2012 at 2:54 PM

the code is working...you can check it here

http://www.hotimages.in

[ REPLY ]
MoviezMobile said... @ January 20, 2012 at 3:36 AM

Hey, thanks, i have come after a long time to reapply this same widget to my blog at www.mobilemoviesite.com. This works like a charm and better than linkwithin. Now my blog looks better :)

[ REPLY ]
queen said... @ January 27, 2012 at 10:28 AM

I can save at my template, but it is not display anithing related post, i dont know why.

my blog is http://queenphotoshop.blogspot.com

[ REPLY ]
Free Movie Website said... @ January 30, 2012 at 9:59 PM

I have been searching the net just to look for different scripts that would customize the size of the image as well as the spacing of the text inside related post widget. Now I have found the solution for that and it is now working on my blog http://www.filmsforfree.blogspot.com

[ REPLY ]
Zita said... @ February 10, 2012 at 12:15 PM

Very useful and informative article you have got here. I liked all the points and they are very useful. Thanks for sharing it with us. cheap domain registration in india

[ REPLY ]
aravind buddha said... @ February 12, 2012 at 1:41 PM

better alternative for linkwith in. Thank you.
http://softoolinfo.blogspot.in

[ REPLY ]
onlinefoktai.com said... @ February 13, 2012 at 9:09 PM

useful tips, thanks for sharing

[ REPLY ]
JAMES NGUYEN said... @ March 10, 2012 at 4:48 PM

Thanks. I got it!!!

[ REPLY ]
Resep Rahasia Ibu said... @ March 12, 2012 at 3:04 PM

i don't want calling the script from http://blogergadgets.googlecode.com/files/relatedthumbs19.js

but when I paste the content of relatedthumbs.js into the template, it cause an error. can you help me?

[ REPLY ]
domina said... @ March 12, 2012 at 6:52 PM

Nice to share this with all the followers of the blog..
How to register a website in india

Domain register

[ REPLY ]
Resep Rahasia Ibu said... @ March 13, 2012 at 10:19 AM

just skip my question above. I've got the answer :D

[ REPLY ]
Website Design Services said... @ May 17, 2012 at 5:27 PM

nice posting,The mangomedia is one of the leading Joomla Website Development in India ,Our services Joomla Website Design,Wordpress Development ,Durpal Development ,Logo Design ,Brochure Design,Flash Design,SEO ,SEM Services in India,Chennai.

[ REPLY ]
maruthi said... @ June 15, 2012 at 10:15 AM

The blog is really informative and i like to share it with my friends. Got a lot of information from this post. Please give us some more news.

3D max course

[ REPLY ]
Bayan Ankara Escort said... @ June 28, 2012 at 4:35 AM

escort ankara bayan tavsiye ederiz.
Escort Bayan,
Bayan Escort,
Ankara Escort,
Ankara Escort Bayan,
Escort Bayan Ankara
Ankara Escort Bayan
Escort Ankara
Kayseri Escort
Bursa Escort
Escort Bayan Ankara,
Escort Ankara,
Escort Bayan Ankara,
Escort Bayan,
Ankara Escort,
Escort Ankara Bayan,
Escort Bayan Ankara,
Escort Ankara Bayan,
Escort Ankara,
Bayan Escort,
Ankara Bayan Escort,
Ankara Escort,
Bayan Escort Ankara,
Ankara Escort,
Kayseri Escort Bayan,
Escort Bursa,
Ankara Escort Bayan,
Escort Ankara Bayan,
Bayan Escort Ankara,
Bayan Ankara Escort,
Ankara Escort,

[ REPLY ]
Bayan Ankara Escort said... @ June 28, 2012 at 4:37 AM

escort ankara bayan tavsiye ederiz.
Escort Bayan,
Bayan Escort,
Ankara Escort,
Ankara Escort Bayan,
Escort Bayan Ankara
Ankara Escort Bayan
Escort Ankara
Kayseri Escort
Bursa Escort
Escort Bayan Ankara,
Escort Ankara,
Escort Bayan Ankara,
Escort Bayan,
Ankara Escort,
Escort Ankara Bayan,
Escort Bayan Ankara,
Escort Ankara Bayan,
Escort Ankara,
Bayan Escort,
Ankara Bayan Escort,
Ankara Escort,
Bayan Escort Ankara,
Ankara Escort,
Kayseri Escort Bayan,
Escort Bursa,
Ankara Escort Bayan,
Escort Ankara Bayan,
Bayan Escort Ankara,
Bayan Ankara Escort,
Ankara Escort,

[ REPLY ]
emilly said... @ July 7, 2012 at 11:26 AM

one week back i started my blog, i was keep reading these blog, i applied this, fl detox

[ REPLY ]
pinoytambayansite.com said... @ September 7, 2012 at 4:08 PM

Thanks! This is useful

[ REPLY ]
Cisgirin said... @ December 11, 2012 at 5:27 PM
This comment has been removed by the author. [ REPLY ]
Web Development Works said... @ December 14, 2012 at 7:19 PM

This is great and good CSS stuff :)
WEB Application Development

[ REPLY ]
Web Hosting chennai said... @ February 27, 2013 at 9:32 AM

just linked this article on my facebook account. it’s a very interesting article for all...



Web Development Company in Chennai

[ REPLY ]
hippop tamizhan said... @ June 20, 2013 at 11:42 AM

I really appreciate for sharing this great post..... by OPS 571 Final Exam provider

[ REPLY ]
Ideation Fashion said... @ June 21, 2013 at 12:42 PM

Good sharing of this wonderful job. thanks. hermes birkin

[ REPLY ]
PSY 201 Week 3 said... @ July 17, 2013 at 2:19 PM

This is very useful post for me and it helps me a lot. Thank you so much for this and have a great time..
by PSY 201 Week 4

[ REPLY ]
david franks said... @ November 21, 2013 at 11:31 AM
This comment has been removed by the author. [ REPLY ]
david franks said... @ November 26, 2013 at 5:08 PM

This is highly informative, interrogative and touchy post. You have made me easier to think on it, I have got the point to start on this topic. Thank you for sharing piece of information and please do posting.Alamode

[ REPLY ]
david franks said... @ November 28, 2013 at 5:29 PM

you did nice work your post is awesome its increase my knowledge.the post is best i can never read before this type of post nice sharing. keep it up
AC Repair in Mumbai

[ REPLY ]
david franks said... @ November 29, 2013 at 6:14 PM

I think your post is very good, rather I would have liked to read a bit more about this topic because I think it is quite interesting. So i look forward to see next updates.
AC Banquet Hall Mumbai

[ REPLY ]
david franks said... @ November 30, 2013 at 11:02 AM

Amazing one! Nice blog…I have been reading your blog since 1-2 months, but today I am touched with your words…i absolutely agree with you. tata structura

[ REPLY ]
david franks said... @ December 4, 2013 at 5:32 PM

The topics you choose for your blogs are outstanding with great stuff and content is always beautifully presented. Brilliant work is done in your writing with good stand point and even I too agree your view point for this particular topic.tata tiscon

[ REPLY ]
Personalize My Baby Blanket said... @ February 19, 2014 at 11:13 AM

I loved the tutorial. We'll use it for my blog personalize my baby blanket

[ REPLY ]
Speedy Pros said... @ February 19, 2014 at 11:15 AM

Great tips for the blog. I loved the tutorial custom tees

[ REPLY ]
techno kaar said... @ July 9, 2014 at 12:17 PM

It is a very inspiring post to go through for excellent story about sustainability. The successful example of urban farming in Chicago can be followed in other cities to make the cities greener and less polluted.I've enjoyed reading the interesting discussion.Hardware & Networking

[ REPLY ]
Promobora Boraest said... @ July 2, 2016 at 12:59 PM

You have to love javascript. Thank you for the informative posts.
Kenyan Domain Registrar

[ REPLY ]
Marker fernandez said... @ May 31, 2017 at 1:27 PM

Amazing post and you describe very well.
Dedicated Server Hosting India

[ REPLY ]

Post a Comment

There was an error in this gadget