How to Add Related Post Widget below Blog posts

After reading to end of the topic, it is customary blogging practice to suggest other related topics to your readers. This will keep them on your website / blog longer, reduce bounce rate, increase page views and earnings (if you're monetized)
- It will make your readers remember your Blog name, encourage them to register / subscribe.. the list goes on and on...

Apart from the Little Javascript load it adds to page speed, there's no other negative effect related posts plugin / widget could have on your blog.

Other CMS like Wordpress / SMF etc already have a plugin / Mod to install - But blogger is lagging behind in creation of Plugins - So this tweak will have to be done from Template > Edit HTML
Note: This is not the related post with Thumbnail widget.

This is yet another Search engine Optimization technique (SEO) the masters use to stay on-top of the game. So lets get right to it, but before we begin - Please Backup your Blogger template by downloading it to your desktop.

Blogger Related Post Widget

Adding Related Post Widget below of Blog posts

1. Login to Blogger dashboard >>Template >> edit HTML and expand widget code.
2. Using CTRL + F,  Search for  </head>
3. Right above the </head> tag, Paste this:
   
   <!--Related Posts Scripts and Styles Start-->
   <style>
   #related-posts {
   float : left;
   width : 350px;
   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(&quot;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png&quot;) 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://ngjobsdaily.googlecode.com/files/related_posts_widget_for_blogger.js' type='text/javascript'/>
   <!--Related Posts Scripts and Styles End-->
   
   .
4.  To show related post above Comment Box, Search for this Code:  <data:post.body/>
   
   If note found: Search this Code:
   <div class='post-footer-line post-footer-line-1'>
   
5. Under of the codes - paste this:
   
   <!-- Related Posts Code Start-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <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 align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://ngbuzzblog.com/2012/08/how-to-add-related-post-widget-below.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
   </div>
   </b:if>
   <!-- Related Posts Code End-->
   
   By default the number of related posts displayed is 5. You can change by by editing the Max-results=5 highlight in Red.Hope it works out for you!
   
   Code Credits to OgbongeBlog