Related Post Widget for Blogger: without thumbnails

Tweet

Pin It

This widget will show related posts section below every post page.The related posts titles are fetched from current post page labels

Steps to Install Related Post Widget for Blogger:

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("http://3.bp.blogspot.com/_nDNgmK8FIyI/TBZPJNFuX6I/AAAAAAAAAHE/GMkhjBBbwLk/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://blogger-relatedpost.googlecode.com/files/related-posts-widget-for-blogger.js' type='text/javascript'/>

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>

8. Save Your Template.

You can Customize your widget by changing CSS.

Y U NO Sharing ?