Add Related Post Widget For Blogger - Easy Way

Related post widget is a must need widget for every blogger blog. It appears on below of every blog post. It helps a blog to increase page views as well as decrease bounce rate of a website. You will get lots of benefits from this gadget. If your blog build on Wordpress then, you can easily add this by using plugins. If you're want to add this on your blogspot blog, then you need to add some HTML or CSS code manually in to your blogger template. In this post I will share with you a complete tutorial how to add this on your blog. So let's begin this tutorial. 

Adding Related post widgets to blogger / blogspot  

There are some easy steps follow these below ways:

• First time log in to your blogger account and go to blogger dashboard. 
• After that, go to Template - Edit HTML  
  
• Click anywhere in the editing area and press Ctrl +F and search below code. 

</head>

• Now copy the below code and paste it on the above </head> tag. 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

• Now here you can customize this widget like color, background color, border size whatever you like. 
• Also search for below code

<b:includable id='postQuickEdit' var='post'> 

• Paste below code just above the </b:includable> code. 

<!-- 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>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.techshoutme.com/2015/06/add-related-post-widget-for-blogger.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End--> 

•  For better understanding see this below image
  
• Click save template button. Cheers you're done !! 

Hopefully you're successfully done to add related post widget with thumbnail in your blogger blog. You can not imagine that, how many benefit you will be get by using it on your blog. So if you're want to increase your blogs page view and decrease bounce rate then, just use this widget on your blog. Happy blogging !!
Source code collect from - helplogger