Related Posts Widget For Blogger

LIVE DEMO

 Related Posts Widget For Blogger

Displaying the links to related posts of the corresponding post will help you increase the page views and keep your readers longer in your site. Users will be tempted to go for the related posts when they are presented attractively with others blog posts title.


Installation widget

1) Go to Design > Page Elements > Edit HTML > Expand Widget Templates

2) Press Ctrl+F and find this </head>

3) Now copy the code below and paste it Before(Above) </head>

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; 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: bold; 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://www.webaholic.co.in/other/bw.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://www.webaholic.co.in/other/related-posts-widget.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

4) Find this code, <data:post.body/> 


5) Now copy code below and paste it Below(After) the lines or paste anywhere way you think where readers could see clearly.

<!--Related Post Widget Starts-->
<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></b:if>
<!--Related Post Widget Ends-->

6) Save Template.


Optional : In order to change the number of maximum related posts being displayed for each label, search for the code (max-results=5) and change the number "5" to any desired number.

Code is created by webaholic