Related Posts Widget for Blogger / Blogspot

This widget will show related posts(You might like also…) section below every post page.The related posts titles are fetched from current post page label[s].
This Widget also increases SEO and Pageviews of your blog.

How To Install Related Posts Widget ?

There are three sections in this widget 1)CSS 2)JavaScript 3)Widgetcode

NOTE: Please BackUP your template Before installing

1. Login to your blogger
2. Then Go to Layout > Edit HTML
3. Check Expand Widgets
4. Now Add Bellow CSS code Right before ]]></b:skin> tag

   #related-posts {
       padding:10px;
       display:block;
       clear:both;
   }
   #related-posts h2{
       font-size: 1.6em;
       font-weight: bold;
       line-height: 1.2;
       margin-bottom: 0.75em;
       margin-top: 0;
       padding-top: 0;
   }
   #related-posts a:hover{
       text-decoration:underline;
   }
   #related-posts ul{
       list-style-type:none;
       margin:10px 0;
       padding:0;
   }
   #related-posts ul li{
       background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYA45ydPxnPnbtXSuulZ2xnq69EGmD7WnCcOFElntwMZpt_vNz5ylxqK5TT7ge5KvsQGEKe1BC9QaPA0WDtjnE5WAMo2FFIS0T6n6XJ5KiFjzauPQ6sf4fO8TlbDmwhrY0V8cwKDf3Fbr/s320/w2barrow.gif") no-repeat scroll left center transparent;
       display: block;
       list-style-type: none;
       margin-bottom: 10px;
       padding-left: 20px;
       padding-top: 0;
   }

5. Now add Bellow JavaScript Right before </head> tag

   <script type='text/javascript'>
   var relatedpoststitle="Related Posts";
   </script>
   <script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>

   # If you want to change the title of your widget you can edit Bellow line in above code
   

   var relatedpoststitle="Related Posts";

6. Now find Any one of Bellow lines

   <div class='post-footer-line post-footer-line-1'>

   <p class='post-footer-line post-footer-line-1'>

7. Add Below Widget code just after it.

   <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>
   <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>
   <script type='text/javascript'>
   var currentposturl=&quot;<data:post.url/>&quot;;
   var maxresults=5;
   removeRelatedDuplicates(); printRelatedLabels();
   </script>
   </div>
   </b:if>

   var maxresults=5;
   # Change maxresults you want to be show
8. Save Your Template.

Take a look at your post pages. It must have Related posts widget.
You can Customize your widget by changing CSS.