Smart related post hack for blogspot blog

You might have seen common related posts for your Blogspot blog(like this). They are all javascript driven widget. The Related Post widget in my blog (see at the bottom of the post) is smarter than other related posts widget that people offers.

Why did I called it smart? Because this widget will list the top related 5(or more) posts sorted by relevancy!
Top relevant posts are the posts that have more tags in common with the current post. This widget also works as a Recent Posts widget when there are not contents to fetch out, for example in your home page. Not only this it can also show related links from other blogs that you specify.

To show related posts in your blog, copy and paste the codes below anywhere you like. Probably it may be after the code: <data:post.body/> . Or you can add it on your side bar as a HTML/JAVASCRIPT widget.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'relatedTitle':'Related Posts:'
   ,'recentTitle':'Recent Posts:'
   ,'loadingText':'loading...'
   ,'maxPosts':'5'
   ,'blogURL':'http://your-another.blog.com'
});</script>

This widget uses jQuery v1.3.2, If you already included jQuery into your blog then no need to do it again. Therefore you can remove the code highlighted in Pink.
You can have your own modification in the related posts. Those values that are in red can be modified according to your need. The code highlighted in blue shows the title as your Recent Posts when there are no tags found, i.e. in your home page, if you are using sidebar widget. In blogURL you can put your other blog where the script my find other relevant posts. Fill this field only if you want the links from other blog to be listed, else keep it blank.

If you are not satisfied with the style of this widget and want little more customization then you can have your own CSS code in the Format below:

<style type="text/css">
   /* Widget Div */
   #related-posts{
      /* Add your styles */
   }
   /* Widget H2 heading */
   #related-posts h2{
      /* Add your styles */
   }
   /* Widget UL list */
   #related-posts ul{
      /* Add your styles */
   }
   /* Widget loading text */
   #related-posts-loadingtext{
      color:green;
   }
   /* Widget loading class set on UL until it is loaded */
   /* you will need set the option: 'loadingClass':'related-posts-loading' */
   .related-posts-loading {
      /* Ajax Icon as background */
      background:transparent url(Load.gif) no-repeat right top;
   }
   /* Style links based on relevacny */
   /* you will need set the option: 'postScoreClass':'related-post' */
   .related-post1{ font-size:90%}
   .related-post2{ font-size:90%}
   .related-post3{ font-size:100%}
   .related-post4{ font-size:110%}
   .related-post5{ font-size:120%}
</style>

I hope this widget will be the best widget for your blog, since it is faster than other related posts widget.
Source: YouCanHack