How to Setup Related Posts Widget for Blogger

Hi Friends,

I wished this feature would have been available out of box with Blogger! But since that is not the case, we need to hookup custom code to achieve the “Related Posts” functionality.

It is very important to let your Blog readers have a glance at other posts. The archive section is not very friendly to expect readers browse manually to different items. Hence the related posts functionality is a big hit to achieve the reader sticky ness to your Blog 🙂

The widget is pretty simple to install! Lets follow the steps below:

Steps for Implementation:

   1. Go to Layout >Edit HTML in your Blogger Dashboard.

   2. Back up your existing Template before making any changes!

   3. Make sure to check the “Expand Widget Templates” box.

   4. Search for the </head> tag.

   5. Add the following code just before the tag.
<![CDATA[ #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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png&#8221;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } ]]>

   6. Now search for <data:post.body/>. In some of the templates this code may look like this
      <div class=’post-body>
      or
      <data:post.body/>

 
   7. Add the following code just beneath the code you just searched for.

<![CDATA[

Related Posts : , <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();</script>

]]>

   8. Now Save your Template and you are done!

Customization

    * In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number “5” to any desired number.

I hope this valuable functionality is easily added by following this simple setup guide!
Original Author Website: http://widgetsforfree.blogspot.com/2009/01/related-posts-widget-for-blogger.html

If you face any problems setting this up leave a comment & i would be happy to help.
Enjoy!

Keywords: Blog Tricks, Related Posts, Blogger, Blogspot, Widget, Javascripts, Guide, etc