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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRvF55_8PlCSd1j4NUXpXAMG01G9pg7wkemicVCP4VdGc_xXyFHJrm2gLwQL8-dDBp93KYvJ8ZmbecXW5HlJP1v7XntcZqbdb55CVqbTN9-WX2uAM_RmtUs4zVcL_HUaRxfZ1NPqTAXdo/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!".

Follow @realcombiz