Related Posts with Thumbnails Widget for Blogger Blogs

This widget will display related posts under each post in your Blogger blog. The uniqueness of this widget is that it displays related suggestions with image thumbnails. Additionally, the posts show different effects on hovering. You can customize the hovering effects also if you are skilled in CSS.



Previously, the related posts with thumbnails were only possible to add using Linkwithin Widget but now by using below script, you can add related suggestions without using the third party services of Linkwithin.

Why this Widget is better than Linkwithin

When you use Linkwithin for showing related posts on your blog, the posts are not always relevant with one another. The suggested posts are chosen randomly, but the widget which you are going to get now lists and shows posts by labels, so the displayed posts are relevant to each other. 
Secondly, when you use Linkwithin for displaying related posts, it may slow down your blog, as the script is loaded remotely from the servers of Linkwithin. But after using this widget, the risk of your blog to be slow down eliminates as the script code is now hosted on robust servers of Google.

How to Add this Widget to Your Blogger Blog

To add this widget to your Blogger blog, follow below instructions.

1. Login to your blog’s dashboard
2. Go to template section and edit its HTML
3. Now press Ctrl+F, find </head> and paste below code just above </head>
<!--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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://supportivehandsjs.googlecode.com/files/related-posts-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Press Ctrl+F again and find any of below lines
<div class='post-footer'>
 <div class='post-footer-line post-footer-line-1'>
 <div class='post-footer-line post-footer-line-2'>
4. Now paste below provided code just below any of these lines
<!-- 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
5. Save your template. You are all done!!

Need any help? Just leave a comment stating your problem. We will help you in getting this widget on your blog.

Labels: ,