Related Posts Widget in Blogspot

NOTE: Back up your existing Template before making any changes!

Open you blog's template in expanded mode for editing; Just after </head> tag add <script src='http://dl.dropbox.com/u/9050117/blogspot_related_post.js' type='text/javascript'/> and just after <data:post.body/> and following code snippet:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <h3 class='post-title'>Related Posts</h3>
        <b:loop values='data:post.labels' var='label'>
            <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'>
            removeRelatedDuplicates();
            printRelatedLabels();
        </script>
    </div>
</b:if>

You can customize css of this wizard in Blogger Template Designer > Advanced > Add CSS for example:

#related-posts {border:1px; margin:5px; padding:5px;}
#related-posts ul li {margin:0; padding:0; list-style:none;}
#related-posts ul a {font-size:12px;}

Post a Comment