skip to main | skip to sidebar

Blogger Data APIDisplaying a related posts is a smart way for keeping your site visitors around. and you may have seen other Related Posts Widgets out there.. but this one will be Easier and Smarter.

* Check Out New Edition
of this widget that is loaded with pretty new features like posts thumbnails and transition effects..

Check features list:
  1. Easier : since All of the work is(has to be) done on the client side, You will not need to modify your template at all. widget will read post tags that blogger already display with each post.
  2. Smarter : Cause 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.
  3. More Optimized: Will only use summary feeds instead of querying default feeds that return full contents!
  4. This widget also can work as a recent posts widget when there is no tags to aggregate.
  5. Can be also used to get related posts from another blogspot blog. And in that case you don't have to run it on a blogspot!
  6. A fixed list of tags can be used to aggregate.
  7. It can display loading text or icon until widget is loaded.
  8. Related posts list can be styled based on relevancy!
  9. You can specify either to load widget on document ready or on window load.
  10. Widget will be attached to container specified or it will be placed where you made the JavaScript call.
To see the widget in action, Scroll down to the end of this post. also hover on links to see relevancy tip.


If you want to understand code behind this widget, check [Code behind : A Smarter Related Posts widget for Blogger].

Typical Usage #1
To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section.
Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.
<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'
   ,'loadingText':'loading...'
});</script>

[containerSelector : 'div.post-body'] is the default container selector of your post body as output by blogger. which means find 'div' tag with class="post-body" if you unlikely modified it; find your new selector.
* Note that:
- you should host widget javascript file on your own, Google code has no problem hosting the project javascript files.
- You may also try Fileden as it is only file hosting I know that would give you a direct-link (A Must for javascript to work) or you can just upload it to your Google pages(phasing out).
But keep the jQuery URL as is, since Google hosts jQuery(and others) very very well.

Typical Usage #2
To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.
Again, If you already included jQuery into your blog. no need to do it again.
<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({
   'loadingText':'loading...'
});</script>


Style Widget with CSS
You wouldn't need any CSS unless you need extra customization.
<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>


 

68 comments

  1. Junnjun Mendoza // April 11, 2009 at 8:24:00 PM GMT+10  

    Its nice to hear this one. This is what im looking for..I've searched a lot and i found this. But it does not show any related post in my blog...Can you help me?Heres my blog
    www.gigsilonggo.co.cc

  2. Mike // April 11, 2009 at 11:53:00 PM GMT+10  

    @Junnjun Mendoza,
    I don't see the widget code been setup on your blog. for further help email me.

  3. Search Engine Optimization Service // May 12, 2009 at 5:21:00 PM GMT+10  

    I need a jquery that automatically display search results of keyword from google. Can this widget do that?

  4. Mike // May 13, 2009 at 6:41:00 AM GMT+10  

    @Search Engine Optimization Service,
    It can get related posts from another blogger blog.. based on current posts tags or a fixed tag list.
    or you can check Google AJAX Search API for Google search results

  5. Anonymous // June 2, 2009 at 12:26:00 AM GMT+10  

    Hey mike,
    This is really nice. I want to implement it for both Recent posts and Related posts but at both the place it's showing Related posts. Please guide me. I am @ http://techieteasy.blogspot.com/

    I will appreciate your help. Thank you.

  6. Mike // June 2, 2009 at 8:33:00 AM GMT+10  

    @techieteasy
    To get related posts, the widget extracts tags from tags links in your page. your blog doesn't use any tags..!
    If you need further help.. email me.
    Also please don't include the widget js from widget download link.. you should host the js file on your own.

  7. mnkt // June 6, 2009 at 2:29:00 AM GMT+10  

    please check my blog, it doesn't work for me http://kyyeutandan.blogspot.com

    it's on the top right, with label "Test"

  8. Mike // June 6, 2009 at 8:49:00 AM GMT+10  

    @mnkt,
    I don't see the widget js file included on your site..
    oops, Execuse me for the wrong comma in sample code. I fixed the code.. Commas should be placed after the first element in options array when calling relatedPostsWidget()

  9. mnkt // June 6, 2009 at 1:45:00 PM GMT+10  

    i changed it to txt file and place in googlesite, is it ok?

  10. mnkt // June 6, 2009 at 2:44:00 PM GMT+10  

    I sent you mail, it will be more convenient

  11. Swashata // July 23, 2009 at 7:32:00 PM GMT+10  

    I love this...! I am soon going to blog on this giving you the credits! I will just give a detail code on CSS :) also there is a way to host the file directly by blogger! Just convert it to escaped character and then place inside a script tag before the closing head! Now blogger itself will host the file ;)

    btw please fix the height of the iframe of your comment area! I have to edit it live with Firbug to put this comment :|

  12. Mike // July 24, 2009 at 9:31:00 AM GMT+10  

    Thanks @Swashata for your feedback..
    You mean inserting script file content inside the head of the blog instead of including it by its URL?
    I don't see the iframe problem on my Firefox, what version do u have?

  13. Swashata // July 24, 2009 at 1:53:00 PM GMT+10  

    Exactly! Have a look at this!!! Inserting jQuery file directly on blogger.... Also check the source code of my blog! I have just converted the whole code into escaped character! Like converted > to &gt; and then inserted the whole code to the head of the blog! Blogger XML parser converts them to normal character while making the html file! :)

    Also I am using Firefox 3.5.1! And I am still having the iframe issue! I cant put the captcha! On the next comment I am giving you a screenshot! (If I face similar problem in this comment)

  14. Swashata // July 24, 2009 at 2:03:00 PM GMT+10  

    Ok! Here are two images

    1. Without making modification with Firebug: http://i27.tinypic.com/24v8wuc.jpg

    2. After modifying with Firebug: http://i26.tinypic.com/1zcfoub.jpg

  15. Mike // July 24, 2009 at 10:23:00 PM GMT+10  

    @Swashata,
    Inserting all Javascript/CSS code in the head will slow down all your pages downloading. on the other hand including a Javascript/CSS files would get cached by the browser after the first request on your site which will down-size your pages and speed up loading...
    Thanks alot for the descriptive screen-shots, It should be fixed now...

  16. Swashata // July 24, 2009 at 10:41:00 PM GMT+10  

    @Mike
    No problem buddy :) The effort you took on making the JS code and writing the tutorial is really much much big than taking a screenshot :)

    I was concerned about the cache But, the problem is that I dont have any premium/paid host right now! Also Google page service has stopped for new users!! So if I link to some free host then the loading time will increase heavily! Also I have seen much improvement after attaching the jQuery plugins directly! I dont know about how google hosts jQuery files... Should I remove the jQuery framework and put the link from Google...

  17. Mike // July 24, 2009 at 10:59:00 PM GMT+10  

    You're correct about Google Pages, they're Phasing it out.
    Fileden is free file hosting and works fine for me.. and note that JavaScript file is only queued the first time the user visit your site!
    Still, to speed up things up, you can Minify/combine many javscripts into one file.

    Yes, you should let Google host jQuery for you.. [http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js], it would be much better..

  18. Swashata // July 26, 2009 at 5:10:00 PM GMT+10  

    Thanks! I have now removed the scripts from my templates and have used google link instead! It has now reduced my blogger template size from 150kb to 99 kb :)

  19. Mike // July 27, 2009 at 10:16:00 AM GMT+10  

    @Swashata,
    Great.. you welcome

  20. Ocean // August 6, 2009 at 6:16:00 AM GMT+10  

    You... are awesome.

    I've been messing with my blog's html for hours trying to get a related posts widget to work, and all along there this simple version that lets me just add it to the widget page! So much easier... gonna go look at your other widgets, too.

  21. Mike // August 6, 2009 at 9:37:00 AM GMT+10  

    @Ocean,
    Thanks for your feedback..

  22. charly // August 12, 2009 at 11:25:00 PM GMT+10  

    Briliant thats all i can say

  23. Mike // August 13, 2009 at 11:05:00 AM GMT+10  

    @charly,
    Thanks.. I'm glad to see the widget running on your blog..

  24. Salman // August 20, 2009 at 9:22:00 PM GMT+10  

    I love it... best thing i like about it is that it is really simple to install as a widget instead of hacking into template code.

    One feature suggestion: Can you change the hardcoded h2 tag to h4. Reason as that blogger templates usually use h1-h3 for blog title, date and post title so starting from h4 should be nice.

  25. Mike // August 21, 2009 at 9:17:00 AM GMT+10  

    @Salman,
    H2 is usualy used for widget title. that's why!
    If you need to style it your way: use
    #related-posts h2{}

  26. Salman // August 21, 2009 at 3:36:00 PM GMT+10  

    Right. I am displaying the widget below my blog item instead of sidebar. I therefore tweaked the css to make it look like h4 and it blends nicely with the content :)

  27. Swashata // August 27, 2009 at 1:48:00 AM GMT+10  

    Finally got a better web host! And that is Google Code itself! Now I am hosting my compressed JS file and CSS file from google code only! It is far better then fileden! I am using SubVersion system and got the tut from here ==> http://engtech.wordpress.com/2007/03/03/howto_google_code_hosting_subversion_tortoisesvn/

    Also it gives 1GB of bandwidth per day which is more than enough for me at this moment !

  28. Mike // August 27, 2009 at 7:12:00 AM GMT+10  

    @Swashata,
    Doesn't look legitimate! I wouldn't advice anybody to do that..!

  29. Takhomasak // September 28, 2009 at 12:47:00 AM GMT+10  

    Trying to get this to work..but all i am getting is Recent post then loading...so curious if anyone has any ideas...url...http://www.forecastfirst.com/special/aim

  30. Mike // September 28, 2009 at 2:12:00 AM GMT+10  

    @Takhomasak,
    I don't see the widget JavaScript code being setup on your page.
    This widget needs to find tags/labels on your page to work as related posts widget. otherwise it works as recent posts widget.

    for further help contact me.

  31. Nariman // October 10, 2009 at 12:22:00 AM GMT+11  

    Mike - nice code! Have you noticed it interfering with the addthis.com js files?

    You can see the error here: http://www.onpreinit.com/2009/10/blogger-seo-limitations-url-length.html.

  32. Nariman // October 10, 2009 at 12:32:00 AM GMT+11  

    Nevermind - looks like it's going to be fixed in their next release:
    http://www.addthis.com/forum/viewtopic.php?f=5&t=20717&st=0&sk=t&sd=a&sid=8da4380a45a6dc43adc95397f4c25dc2&start=10.

  33. Mike // October 10, 2009 at 12:37:00 AM GMT+11  

    @Nariman,
    No problem.. in the meanwhile you might wanna try sharethis.com

  34. Kris Kombrink // October 29, 2009 at 5:31:00 AM GMT+11  

    Awesome, worked like a champ. Saves a lot of work on my end!

  35. Mike // October 29, 2009 at 10:37:00 AM GMT+11  

    @Kris,
    Thanks for your feedback :)

  36. Mia // November 14, 2009 at 11:48:00 AM GMT+11  

    Uberawesome Mike ! :) this one is def gonna get you lots o' love from the Blogger platform community - told ya u were UberKewl ! :))

    M. 

  37. Mike // November 14, 2009 at 11:56:00 AM GMT+11  

    @Mia,
    thanks for your feedback and the RT's.
    You have an Uberawesome blog!

  38. rana // December 9, 2009 at 6:31:00 PM GMT+11  

    Thanks for this one. I will try it out soon.

  39. Rana // December 11, 2009 at 6:03:00 PM GMT+11  

    hi, i was trying it out on my blog. Please check that here:
    my blog, on right column, but its showing recent posts by default. How can i change it to show related posts? I did what you exactly showed on this article, Please help me.

  40. Mike // December 11, 2009 at 6:32:00 PM GMT+11  

    @Rana,
    You have no tags on post page! that's why :)

  41. Anonymous // December 14, 2009 at 9:26:00 PM GMT+11  

    hello
    when i try to put arabic text in the array tag ['إسلام','علم']

    its not work, but when i put english text the script work fine ! so please anyone have an idea how to fix the arabic character problem in case my blog tags in arabic char.

  42. Mentor Matt // December 18, 2009 at 10:08:00 PM GMT+11  

    Hi, Thanks for your code! I have implemented it in my blog http://annoyances-resolved.blogspot.com and it works superb. I would like to reduce the size of the text "Related Posts" to match the rest of the blog. I gather you would want to use style.css. Where do you put this style.css in blogger and which field do you need to modify to reduce the font size for the text "Related Posts" ?

  43. Mike // December 18, 2009 at 10:32:00 PM GMT+11  

    @Anonymous with arabic Issue,
    Can you email me with more details?

    @Mentor,
    You need to set style of #related-posts h2{} and place that in your template code [Layout > Edit HTML] inside of <b:skin><![CDATA[ and ]]></b:skin>

  44. aram // January 2, 2010 at 6:54:00 PM GMT+11  

    I read your blog very impressed seen this kind of important information’s. Really am interested to back to your blog again to gather some more information’s i will copy that to my site if you do not mind you are the best

  45. Mike // January 3, 2010 at 4:17:00 AM GMT+11  

    @aram,
    Sure, as long you play by the rules of the License :)

  46. wings // January 11, 2010 at 6:06:00 AM GMT+11  

    thanks for sharing..

  47. Girish // January 13, 2010 at 5:06:00 PM GMT+11  

    Thank you Mike! You have made the code idiot proof. I have used it on my blog and it works very well!

  48. Gothika_47 // February 25, 2010 at 11:55:00 PM GMT+11  

    How can i change those white dots to something else?Like a 16x16 RSS icon? :]

  49. Mike // February 26, 2010 at 12:45:00 AM GMT+11  

    @Gothika_47,
    Related posts links are displayed as unordered list.. check this quick tutorial on how to style it using simple CSS code.

  50. gxg // March 13, 2010 at 6:53:00 AM GMT+11  

    Thanks for the widget, Mike, it's very easy to use and to configure!
    I've been looking for something like this!
    I have added it to my blog already.

  51. Mike // March 13, 2010 at 7:51:00 AM GMT+11  

    @gxg,
    you welcome and thanks for your feedback :)

  52. World of 22 // April 11, 2010 at 3:38:00 PM GMT+10  

    I have installed it on my blog.It's working!Thanks!

  53. gxg // April 16, 2010 at 12:43:00 AM GMT+10  

    Hi, Mike! I noticed a small issue with the widget.
    If you tag the URL with Google Analytics parameters like this:
    http://exde601e.blogspot.com/2010/04/chromes-silent-update-extending-to.html?utm_source=FeedBurner+feed&utm_campaign=Feed:+Fors
    the widget considers this a entirely different page / blog post and when it generates the list of related posts, it puts the same one (without the tags) at the top (which is normal, since they have exactly the same tags).
    Could you change the script so that it discards the tags or everything else after the '?' in the URL, so that it doesn't put the same article on the related list? Thanks!

  54. الطالب // April 21, 2010 at 1:39:00 AM GMT+10  

    Hi Mike,
    Thanks for this Smart widget !
    i did translate your tutorial to Arabic Blogger Community (+adding some points)
    http://www.italib.net/2010/04/related-posts-widget.html

    Keep it Up!

  55. Nabeel Ahmed // May 19, 2010 at 5:27:00 AM GMT+10  

    please visit my blog and tell me unnecessary categories for my site or blog

  56. Zeinobia // May 23, 2010 at 5:06:00 AM GMT+10  

    thank you so much for this wonderful widget I was looking for it for a long time.
    Now I got a little question I followed your instructions to install the code in to the footer in the page elements section , it appears fine under the posts as required but it also appears in the pages , what should I do to make stop from appearing the pages !!??

  57. Zeinobia // May 23, 2010 at 6:04:00 AM GMT+10  

    hey Mike , I forgot to say that I am using the new template designer

  58. Mike // May 23, 2010 at 9:20:00 AM GMT+10  

    Zeinobia, you are most welcome :)
    It works on pages as a recent posts widget -as there are no tags to aggregate related posts for. So, to disable that behavior, set the "recentTitle" option to an empty string ''.

  59. Zeinobia // May 24, 2010 at 3:41:00 AM GMT+10  

    Thanks Mike , it worked as a charm :)

  60. Zeinobia // May 29, 2010 at 7:11:00 AM GMT+10  

    Sorry Mike but I noticed something that the recent posts not the related posts are shown , how can I fix this !!??

  61. Mike // May 29, 2010 at 7:44:00 AM GMT+10  

    @Zeinobia,
    No problem, Can you give me an example link?

  62. Zeinobia // May 29, 2010 at 9:08:00 AM GMT+10  

    thanks Mike
    now this is an example link which caught my attention to the problem
    http://egyptianchronicles.blogspot.com/2009/08/struggle-on-nile-background.html
    as you can see this is an old post from last year and yet I found the recent posts in the related section

  63. Mike // May 29, 2010 at 9:26:00 AM GMT+10  

    @Zeinobia,
    That behavior is alright.. The widget will get latest posts of related tags, so it might look like they are recent posts but they are not!
    As you can see the related posts are NOT sorted descending(Newer first) as it would be in case of recent posts.

  64. frontierville // August 19, 2010 at 5:35:00 AM GMT+10  

    thanks for the script.. installed it on my blog.. it wud be easier if you also explain the parameters that can be passed in it...

  65. Mike // August 19, 2010 at 8:16:00 AM GMT+10  

    @frontierville,
    you welcome :)
    Check Widget Options

  66. Mike // September 18, 2010 at 2:56:00 AM GMT+10  

    * Check Out New Edition
    of this widget that is loaded with pretty new features like posts thumbnails and transition effects..

  67. eXamResults // September 18, 2010 at 4:20:00 AM GMT+10  

    Thank uuu for sharing:-)

  68. TechDoz // May 20, 2011 at 7:00:00 AM GMT+10  

    Excellent template design...
    Looking very elegant I must say...

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS