Join Our 1500+ Community Readers

We hate spam as much as you!

How to Add Thumbnails Related Post widget for Blogger

Don't increase visitors/readers bouncing rates of on blog. If visitor finds your Article is enjoying let remain on your blog by adding some of spicy related post widget to blog. Simple liks type Related post widget we've discussed eariler now, here BlogTariff educate you how to add "Thumbnail related posts widget for blogger.
By displaying Thumbnails Related posts widget on your blog visitor/readers attracts easily and clicks on posts reader find useful. This widget displays not only Related posts links also thumbnails according to the category wise which you've added under Label/category.
Let's begin the tutorials.

How to Add Thumbnails Related Post widget for blogger

Step One:
Sign into your blogger account
Click on "Design (Layout in the new blogger interface)
Click on "EDIT HTML" link tab
Mark the "Expand widget template" box
Step Two:
Now, Search the code
After finding the code copy the below code and paste above to it
Step Three
<!--BTF Thumbnail Related Posts widget Scripts Starts-->
<!-- 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="";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--BTF Thubmnails Related Posts with Scripts Ends-->

Step Four


If need replace "5 posts" with your own value under "var maxresults=5;" number of posts to be displayed
If need to display Thumbnail Related post widget to be displayed in Home page Delete it Code color in "Pink"
Step Five:
Search for code
<div class='post-footer-line post-footer-line-1'>
If you can not find the above code then try this code to search
<p class='post-footer-line post-footer-line-1'>
Or Else
After finding the code copy the below code and paste it below the code
<!-- BTF Thumbnails Related Posts widget  Code Starts-->
<!-- 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; + + &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=''><img alt='Blogger tricks and Blogger Tips' src=''/></a>
<!-- BTF Thumnails Related Posts widget Code Ends-->
After sucessfully adding the above code now, if you need change the below tags/value


If need replace "6 value" with your own value under "var maxresults=6;" number of posts to be displayed
If need to display Thumnail Related post widget to be displayed in Home page Delete it Code color in "Pink"
After successful and necessary modifications now, "Save the Template"


If you enjoyed this article and we helped you in this regard, favor us BY Subscribing to US

    You May also Like Trending Posts


Post a Comment

About Me

My Photo
Krishi Omli
Dedicated blogger - Always endeavor to know new things and share with others.
View my complete profile

Money Tariff

All Your Tech Needs

How to Help us?

If you feel our blogging Tutorials helped to you, then help us to spread our voice by using the below badge:-


Try a Back Links

Total Pageviews

| Blog Tariff | Blogger Tricks | Blogging Tips | SEO | Earn Money | Blogger Templates © 2009. All Rights Reserved | Template Style by Blog Tariff .com | Design by Brian Gardner | Back To Top |