RealcomBiz
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

</head>

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 {
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 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>
<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-->
</head>

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;'>
</b:if>
<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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</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>
</b:if></b:if>
<!-- 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!".

2 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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 :)
    www.BloggerPlugs.Blogspot.com

    ReplyDelete
  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?

    http://www.pursuingcontext.com

    ReplyDelete

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