Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Add Related Post with Thumbnails Below your Posts

Let me introduce to you the new blogger related post with thumbnails, as we all know how importance is related post under your each post. It makes many readers to spend more time on your blog if they see another related articles which may be of help to them.
But to get readers reading through your related post, you need to provide them a eye catching content which related post with thumbnails can be of help to that.
The related post widget will show similar articles related to the post they view having the same label title as the current post. If you apply this to your blog, it will appear as the image shown below

To get this apply to your blog, simply follow the few steps below.

> Login to your Blogger dashboard
> Go to Design > Edit HTML
> Remember to Back up your Template > Mark/Tick Expand Widget Templates
> Use ctrl F to find the below code


Replace it with the code in the box below.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {

#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{
#related-posts a:hover{

#related-posts  a:hover {
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Find the next code below using ctrl F.

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

If you can't find the above code, find the below one.

<p class='post-footer-line post-footer-line-1'>

Immediately after any of the code you find paste the code in the box below after it.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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;'>
<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:loop>
<script type='text/javascript'>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
<!-- Related Posts with Thumbnails Code End-->

Save your Template.

Note : You can adjust the number related post you want to display under each post by editing the code written in black in the first box, change it to your own desired number.

var maxresults=5;

> You can also edit the title of your widget, you may decide to use "Related Articles" or any you choose to use.

var relatedpoststitle="Related Posts";

> To change the the splitter line colour edit the code

var splittercolor="#d4eaf2";
click here to choose any hex colour of your choice
This is design by bloggerplugins but customize from my own aspect.

Thats all, hope this really help, but if you can't figure something out in this tutorial, use the comment box below.
In my future post, i will be dropping a more on how you can style your related post widget, just simply subscribe to this blog, so as for you not miss any of our latest hot tutorials direct into your email.
Don't forget to share this post using the share button below.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

6 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I saw a number of website showing same method of adding related posts widget but you used a different method :)

  2. This is working fine on my post pages. Thanks!

    Is there a way to put it under each post on the main page of my blog as well?


  3. All the best blogs that is very useful for keeping me share the ideas
    of the future as well this is really what I was looking for, and I am
    very happy to come here. Thank you very much
    earn to die
    earn to die 2
    earn to die 3
    Hi! I’ve been reading your blog for a while now and finally got the
    earn to die 4
    courage to go ahead and give youu a shout out from
    earn to die 6
    Austin Texas! Just wanted to tell
    earn to die 5
    Hi! I’ve been reading your blog for a while now and finally got the
    happy wheels
    strike force heroes
    you keep up the fantastic work!my weblog
    age of war
    good game empire

  4. Very good idea you've shared here, from here I can be a very valuable new experience. I really hope to see the same high-grade blog posts from you in the future aswell. I like play game as Mutilate A Doll 2, Game return man it's me telling the lighting what is wanted, game piano tiles is addictive game that lets you hone your skills, with game score hero provides a whole new way to play soccer that requires.


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger