• How To Add Related Posts/Similar Posts Widget for Blogger Blogspot


     Live Demo

    1) Login to blogger > Layout > Edit HTML > Download Full template (for backup) > Tick Expand Widget Templates.

    2) Now look for </head> . And add the following code ABOVE it.

    <!--Related Posts Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:2px;
    padding-left:5px;
    }
    #related-posts .widget{
    padding-left:6px;
    margin-bottom:10px;

    }
    #related-posts .widget h2, #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#006699;
    }
    #related-posts a:hover{
    color:#003366;
    }
    #related-posts ul{
    list-style-type:circle;
    margin:0 0 0px 0;
    padding:0px;
    text-decoration:bold;
    font-size:15px;
    text-color:#000000
    }
    #related-posts ul li{
    background:transparent url(http://2.bp.blogspot.com/_tbHfaj1A058/S0cIGtxWTMI/AAAAAAAAIWs/naYwvQOLV28/s1600/xxz.gif) no-repeat ;
    display:block;
    list-style-type:none;
    margin-bottom: 4px;
    padding-left: 15px;
    padding-top: 0px;}
    </style>
    <script type='text/javascript'>
    var relatedpoststitle=&quot;Related Posts&quot;;
    </script>
    <script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/relatedposts.txt' type='text/javascript'/>
    </b:if>
    <!--Related Posts Scripts and Styles End-->


    3) Finally look for

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

    or

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

    And add following code BELOW it.


    <!-- Related Posts Code Start-->
    <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='' style='display:none'/>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div>
    </b:if>
    <!-- Related Posts Code End-->

    You can change the number of related posts shown by changing value

    var maxresults=5;

    It's done.Live Demo
     









    1 comments:

    1. I tried this but it doesn't work :( Are there any widgets we can add separately, without modifying the template code?

      ReplyDelete