Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Wednesday, March 28, 2012

    Related Post Widget for Blogger: without thumbnails

    SOCIALIZE IT →

    Related Post Widget for Blogger
    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.


    0 comments:

    Post a Comment