How To Add Related Posts Widget for Blogspot?

Hello all, today i have a kind of nice posting where, i will share for you how to add related posts widget like Wordpress in your beautiful Blogspot. Any related post are important because its can reduce your bounce rate in blog. Such as, when visitor come in your blog to read, as possible a related post will also be read. Its can be make your reader more easier to find what they want. So you can follow this step, how to add this widget in blog.

1. Login dashboard > Edit HTML > click Expand Widget Templates

2. Press ctrl + F and search  </head>  then add code below before this

 

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6YK-leWRd8lvZkLT7D11HZgQocdw5fZClm9nsmGaHO6xlnGQ-K3UqnJzkfSKM8utC_-uDxzJMyZNsVpzj8eqVDrIsQ2fu-j3nUumSSr2y20oG_y7BnLqps4BTD6_xz9b0JHlQgWhWmOo/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

3. After that, search for this <data:post.body/> and paste code below

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

 4. Save your template and well done.