RELATED POSTS WIDGET FOR BLOGGER WITH THUMBNAILS

                         

Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

How To Add Related Posts Widget For Blogger With Thumbnails?

1. Go To Blogger Dashboard > Template > Edit HTML.

2. Check the "Expand Widgets Template" box.

3. Search (CTRL + F) for this piece of code:

</head>

4. Copy and paste the below code just before/above </head>:

<!--Related Posts with thumbnails Scripts and Styles Start B2W-->
<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/AVvXsEjOm4a7FejKawQo1GkF4-jX3n2BDbCc2vA6r2-OYGEGUSctse2m4p9TReWeAWMhgzbGRUokas9be0xj-8gB_FthkPtXeQmlIbJxdY2A-8ctzWsTITIot_gjL3iGSNekT7Crc2n8Yxi4aTQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End B2W-->

Note:

• To change the default picture when no images are available, replace the URL in blue with your own.
• For displaying more than 5 posts, replace 5 value from "var maxresults=5;"

5. Now find the following code:

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

If you can't find it, then search for this one:

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

OR:

<data:post.body/>

6. Copy and paste the below code just after any of those lines

<!-- Related Posts with Thumbnails Code Start B2W-->
<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://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoAfjXyXocTxHsGkf6z2bZYCMVDS-l953ybku0TgXzwLBWDfj2ZPXWRbKRmf_VliGPleAgeb2Wx8rupfww-KC12KpkU3Yla5jAJcxxCP2XWkT3p6y5oTxyVlCuyk1ns3Ww9maiTXE4eaR/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End B2W-->

Note: 

• Change the 6 value from max-results=6 with the number of posts you want to be displayed.

7. Save the Template