The related posts widget is really helpful for your site because of the following reasons:-

  1. It attracts the attention of the user viewing your website to other articles filed under the similar category i.e the posts filed under the same label. So a user generally ends up viewing those articles and in effect stays at your site for longer period of time.

  2. It generates a lot of internal links from which a user might be able to find related information on your site and these internal links are good for SEO also.
To add the widget to your just follow these simple steps:-

  • Open the layout section of your blog and then go to the Edit Html Section.

  • Now add the following code just above the </head> tag. This code is added in the head section because style-sheets are generally defined in the head section.


    <style>
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 12px 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 : 12px;
    text-decoration : none;
    }
    #related-posts a:hover {
    color : #054474;
    text-decoration : none;
    }
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
    }
    #related-posts ul li {
    display : block;
    background : url("http://ramannanda9.fileave.com/0041_sparklet.png") 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://ramannanda9.fileave.com/related_widgets.js' type='text/javascript'/>

  • Now click on the expand widget template and search for <data:post.body> and add the following code after the </p> tag.
    <b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts">
    <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>

    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>

    Now you can customize the number of related posts that are displayed by changing the value of the variable max_results to any number you want (try to keep it small, 5 is the default value). Just use ctrl+f to find the variable max_results with ease. The data for related posts is read from your site feed.

    Now just click on save the template and you will have the working related posts widget for your blogger site.
You should not encounter any problems in case of install but in case you do, post a comment i will post the solution.