• How To Add Related 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.


    <!--RelatedPostsStarts-->
    <style>
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 11px Verdana;
    margin-bottom:10px;
    }
    #related-posts .widget {
    list-style-type : none;
    margin : 5px 0 5px 0;
    padding : 0;
    }
    #related-posts .widget h2, #related-posts h2 {
    color : #940f04;
    font-size : 20px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
    }
    #related-posts a {
    color : #054474;
    font-size : 11px;
    text-decoration : none;
    }
    #related-posts a:hover {
    color : #92002d;
    text-decoration : none;
    }
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
    }
    #related-posts ul li {
    display : block;
    background : url(&quot;http://1.bp.blogspot.com/_tbHfaj1A058/S7BMWcAJuxI/AAAAAAAAJpI/bNZmd_RPMh0/s1600/xxz.gif&quot;) no-repeat 0 0;
    margin : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 1px;
    padding-left : 16px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    }

    </style>
    <script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/RelatedPosts_ForBlogger.js' type='text/javascript'/>

    <!--RelatedPostsEnds-->


    3) Now look for
    <data:post.body/>

    And add this code BELOW <data:post.body/>


    <!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <font face='Arial' size='2'><b>Related Posts From Category: </b></font><font color='#929292'><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-POSTS-ENDS-->


    It's done. Live Demo
    And no. of posts to be shown can be changed here max-results=5  




    0 comments:

    Post a Comment