Related Posts Widget for Blogger with Thumbnails

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

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:ifcond='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

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 !

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?

@delphi ,show me a post which has an image uploaded via bloggerall 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.

@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.

@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=6By default only 6 posts are fetched from a label.So only 5 posts will be displayed (excluding the current post).

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!!

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!

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:-

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.

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 ;).

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?

@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

@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..

@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.

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.

@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.

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 ?

@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..

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.

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

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

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....

@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.

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!

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?

@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 codecolor:black; this line determies the color of the text displayedand 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..

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!

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

@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 :)

@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.

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

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!

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!

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 jaAgain I apologize for my bad English;) (the translator)

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

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...

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.

@Maquina de Caféyou have to remove only 4 lines from the codethey are1.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-->

@AneeshThanks 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 !