How To Put A Related Posts With Images Gadget Under Your Blog Posts

Posted : Tuesday, March 30, 2010 |  Post Author : Paul Crowe | 8 comments

One of the most popular related posts gadgets for Blogger users is the related posts with thumbnails provided by linkwithin.The easy installation and clean look of the gadget makes it an easy choice for most bloggers.However the linkwithin gadget does not suit everyone and does not work with every template for example the template I’m currently using will not display that gadget properly.If your having similar issues with the linkwithin gadget don’t worry, in this post i will show you how to use an almost identical gadget that is coded to work well for all blogger templates.

Note – We have recently published a new improved version : New Related Posts With Thumbnails Blogger.

If your not familiar with the related posts with thumbnails gadgets lets look at how it works, whats displayed and were it appears.The gadget will be located below all your posts and will list a number of posts (The number is specified by you) that are related to the post it appears under.In order to display related posts the gadget uses the labels used in each post and lists posts using the same labels.Along with the post title this gadget displays a thumbnail (Small version of an image you used in the post) and a short description of the post although this is optional.

large blogger square logo


You can see a working example of this gadget by viewing any post in the new template gallery:

How To Add The Recent Posts With Thumbnails To Your Blog

Step 1. In your dashboard click ‘Layout’ > ‘Edit Html’ > Tick the ‘expand widget templates’ box


Blogger layout

edit html blogger

Expand widget templates blogger

Step 2. In your templates Html find the following piece of code :
(Click Ctrl and F for a search bar to help find the code – More Info)


Step 3. Place the following code Directly Above/Before </head>

<script src=’’  type=’text/javascript’/>

<!–Related Posts with thumbnails Scripts and Styles Start–>
<b:if cond=’data:blog.pageType == “item”‘>
<style type=’text/css’>
#related-posts {

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
#related-posts a:hover{

#related-posts a:hover {

<script src=’’  type=’text/javascript’/>
<!–Related Posts with thumbnails Scripts and Styles End–>

Step 4. Find the following piece of code in your blogs html :


If <data:post.body/> appears in your template twice use the second occurrence.

Step 5. Place the following piece of code Directly Below / Under <data:post.body/>

<!-- R-P-W-T Code-->
<a href=''><img alt='Best Blogger Tips' src=''/></a><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 cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='' target='_blank'><small>Get This Gadget</small></a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts";
</div><div style='clear:both'/>

Note : You can change the amount of related posts to be displayed by changing the maxresults=6 as highlighted above in red.
You can change the title above the gadget by changing the text Related Posts highlighted in red above.

InfoRemember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank !

This is a nice gadget that will keep people on your blog looking through your archive, a vital factor in building a following for your blog.

If you have any questions just ask !

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. It’s not working for me.. I must be doing wrong. Crap.


  2. @ Febbe This is an old script that may no longer work.I will create a new script and post it hosted on my own account this week.


  3. It’s work! Thanks for the tips! I’ll recommend it.


  4. వినోద్June 27, 2011 at 3:53 PM

    I cant able to find
    please tell me….


  5. Thanks Bro!


  6. Thank you so much for this post, i did it. Can I ask something from the author who wrote this tips? I am looking for “related post widget for blogger” but this time, a related post widget with a little sentence (summary snippet).

    WordPress has a tutorial for that, but in blogger I am trying hard to find that kind of codes, please post it if you have already that blogger tutorials.

    That related post with summary snippet could also help blogger using in terms of SEO. Thanks for your time. I am looking forward to see your blog updates.

    Please comment on any pages in my blog at Gilbert Canda so that I will be reminded, I am really looking for that tutorial. I highly appreciate your effort in sharing blogger customization.


  7. It’s work! Thanks for the tips!


  8. There are few online sites as well which can help you in showing Related posts of your blog. One such site is

    You can use this widget with your blogger blogs as well without making any change in coding part.