How To Add Related Posts Widget In Blogger?

Increasing page views is very important for a blog. People will stay on your blog more time if you give them some easy navigation steps. Such as inter post linking, related post widget, feature posts etc. In this tutorial we will learn how to add related post widget in your blogger blog. This will show your similar posts titles under each post on your blog. When a reader finishes a post he/ she will see the related posts list and will read further posts on your blog. This is one way to hold a visitor for more time. Of course this will help to reduce your blog’s bounce rate.

UPDATE: How To Add Related Posts Widget With Thumbnails In Blogger Blog?

This related post widget find similar posts according by your post tags. So it’s important to tag your posts with proper keywords. This is also knows as post labels. This widget fetches the similar posts from those posts which have the same label tags as current post. I hope you understand.

• Learn, How To Customize Blogger's Official Label Widget?

Now come to the setup process...

1. Log into your blogger account

2. Click on your blog title

3. Click Template from left side menu

4. Backup your template before editing

5. Click Edit HTML, Click Proceed

6. Search for </head> by pressing Ctrl+F

7. Now paste the following code just above/ before </head> tag

<!--Related Post Widget www.shinemat.com Starts-->
<style> 

#sm-related-posts { float : left; width : 470px; margin-top:18px; margin-left : 4px; margin-bottom:15px; font : 12px Arial; font-weight: normal; margin-bottom:8px; }

#sm-related-posts .widget { list-style-type : none; margin : 5px 0px 5px 0px; padding : 0px; }

#sm-related-posts .widget h2, 

#sm-related-posts h2 { font-size : 18px; font-weight: normal; margin : 5px 7px 0px; padding : 0px 0px 5px; } 

#sm-related-posts a { text-decoration : none; }

#sm-related-posts a:hover { text-decoration : underline; }

#sm-related-posts ul { border : medium none; margin : 10px; padding : 0px; } 

#sm-related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAJ1rpYqf0Gt5FAjVaxrdDtm98dkDsE7tvyNQUXehOxb5eIq5VEYVny-L1yAZXU1sihDaf9P9s1f_eFqyi5rcnCsVqdXjuUSWNIQVQxY-eeoNALwJH7NMyhQ7tpQDxWg-aGtlnVXJiaw/s1600/sm-related-post-icon-1.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 23px; margin-bottom : 5px; line-height : 2em; border-bottom:1px solid #C0BABA; } 

#sm-related-posts ul li:hover { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuezjrJBU2QO6IO4Lphss1eLY8TX12TZ-s65vE5Jk3TEyhvYAf2jbVChyCYtLm17AxyBZB2fSI9VrU2jkCbnC2jOoSPpbEFmJDZwsBJq4CAzHDHPkvD0VB60gHY1i2ZYq3wcvqy2WhGIM/s1600/sm-related-post-icon-2.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 23px; margin-bottom : 5px; line-height : 2em; border-bottom:1px solid #C0BABA; }

</style> 

<script src='https://googledrive.com/host/0B2c_2BWPUGv7YS13RFo3Zzl4Sjg/related_posts_widget_for_blogger-user-shinemat.js' type='text/javascript'/>
<!--Related Post Widget www.shinemat.com Ends-->

8. Now search for <data:post.body/>

9. Paste the following codes after/ below of <data:post.body/>

<!--Related Post Widget www.shinemat.com Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sm-related-posts'>
<font face='Arial' size='4'><b>Related Contents: </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=06&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget www.shinemat.com Ends-->

10. Now click Save Template button, and you are all done.

• How To Optimize Post Titles Through H2 Heading Tag?
• How to add ADD THIS sharing widget in blogger blog?

Note:
You can select the number of maximum related posts in list. Just change max-results=06 (red highlighted) to any number.
Default number is 06.

That's all. If you get any problem regarding this tutorial fell free to ask me. I am here to help you with smile. Have fun!