Stylish Related Posts Widget with Thumbnail for Blogger

Related posts widget with thumbnail for blogger – this is a wonderful widget to display the related posts in the footer of each blog post from the same category along with image thumbnail. By installing this widget in a blog, not only help to display the relevant posts, but also can increase the blog page-view and reduce bounce rate as well. This a wonderful hack to remain your readers for long periods which is very important for your blog. Mostly third party professional blogger templates already included this feature. But the blogger default templates don’t have this feature. So, if you are using the blogger default or a template which don’t have related posts widget and you’re looking to include this feature in your blog. Here’s a stylish related posts widget with thumbnail for blogger ready to install in your blog.

How to add related posts widget with thumbnail in blogger

To make this widget you need the knowledge of JavaScript and CSS languages, but don’t worry in this post we are going, to add this through already written code, so, you don’t need to write code but only follow the below simple steps to add this important feature in your blog.

• Sign into your Blogger account
• Go template
• Download the Bach up your template, as a precaution if you make any mistake in editing template then you’ll recover from backup.
• Click the Edit HTML tab and search </ head>
• Now click on below “view code” button. Copy the code from appearing pop-up window and paste the just above the </ head> tag.

View Code

• After the adding above code, then scroll down and search <div class='post-footer'>Paste the below code just above it.

<!-- Related Posts with Thumbnails Code Start-->
 <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>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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:if></b:loop>
 <script type='text/javascript'>
 var currentposturl=&quot;<data:post.url/>&quot;;
 var maxresults=5;
 var relatedpoststitle=&quot;Related Posts&quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
 </script>
 </div><div style='clear:both'/>
 </b:if>
 <!-- Related Posts with Thumbnails Code End-->

Customization

 maxresults = 5 ; to change the number of related posts.

” Related Posts “; to change the title of this widget.

Save the template and check the results.

Hopefully, it will be working in  the blog.  However, if you are facing any trouble about the adding related posts widget, then share with us in the comment section.