Related Posts Widget for Blogger

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/AVvXsEgL_tt4WnxtRZ20GE94gSHb1stQGbEsOi9QVALeee_Vb4wQXHP0sjRbC1fi50-kc4H4Z6O9gY6oxPvwdF_EZkuWQ7b6vrWGWLvxGIskQI41ZX23OlDn65SvRJXcbZnOw_ip6zTD3atfnWMB/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://widgets.way2blogging.org/blogger-widgets/w2b-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.
If you have any doubts While installing you can contact me via comments
Related Posts Script by Blogger Plugins

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here way2blogging.org and directly ask the developer of this Widget for the Solution by Commenting there.

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---