How to Add Related Posts Widget in Blogger

If you want that your blog readers see the related posts widget below each post and check the other posts on your blog before leaving your blog then you have to follow these blogging tips to do so.
The benefit of this related posts widget is that your readears will see the other posts related to this post and you will get more traffic for your blog and also permanent readers for your blog. Now let's start the procedure.
If you are interested in adding that widget, just read the guide below;
1. First of all Log in into blogger with your blogger ID.
2. Click on Layout.

3. Click EDIT HTML tab.
4. Click Download Full template. Please back up your template first because in case of any error you can reload your template again and restart your process from the first step easily.
5. Now find the code </head> and be sure that you have expand the widget.
6. Now copy the following code just right above the </head>

<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/AVvXsEj9zt01WFayMtt8Gy3lPwSmnaBiVUxwGRbPYUUP4AfWubtRgGoIKFrR3k-8FC8G_Jg1dh66-3XBBB4Fldol5xC2HyaDtORMrXIwFWZPCGNYfNKb6rJpATCMyqmGnuGbSCn7IO3Xnuh7ZEA/") 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://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>

7. Now in the next step search <data:post.body/> by pressing ctrl F. In some cases if you donnot found this then try for these two <div class='post-body>
or <data:post.body/>

After finding the above code now copy and paste the following code just below the above code.

<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>

8.Click on SAVE TEMPLATE.
Now see the result in preview and you will be surprised after clicking on any post in your blogger. You can see the related posts widget working and related posts links are coming right after your each post. If you find it helpful then please leave a comment to know about more things like this.

9. If you want to see more then 5 related posts link then change max-results=5 to any desired number.

Thanks!