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

</head>

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 {
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/AVvXsEh1HbXIXLo1M9xZNnrXiwCLat0_KVvyfA3QJJ5lLR7fnma433G5GecPA8W50Wfd4blhBP8jJlLYpyDRqPPVUhK-YGNeClku7EIEgdQmWmgDeZlRMnZCPB5LukvTmSBV3Km37cyJVD56X4M/s660/noimage-blogtariff.com.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogtariff.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--BTF Thubmnails Related Posts with Scripts Ends-->

Step Four

Cutomization

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

<data:post.body/>

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;'>
</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.blogtariff.com'><img alt='Blogger tricks and Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAYZpV2PVLC4X0o04vf4cMtL66kHIf-XD0JfWqumcSCgHqp6Ww_MenHR02UlfzsbcfYRdAZBeeHuMgNpUCG_2lufgS32mgUkz3JO_kcWoVhg9FYEreJf4-TUbf4TEVv0huLVzGA8G6UWM/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- BTF Thumnails Related Posts widget Code Ends-->

After sucessfully adding the above code now, if you need change the below tags/value

Customization:

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"

Appreciation

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