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


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 == &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 cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &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='' target='_blank'><small>Get This Gadget</small></a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts&quot;;
</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 !

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

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. I cant able to find
    please tell me....

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

  6. It's work! Thanks for the tips!

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


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us