skip to main | skip to sidebar

Smarter Related Posts Widget for Blogger
A new edition of my jQuery plugin -Related Posts widget for Google Blogger- that is loaded with pretty new features like posts thumbnails and transition effects..

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!

Check out this easy setup wizard for demos and code generation. Also, to have code copied to your Blogger blog!


Easy Setup Wizard!

Few Notes

  • Code consists of 2 important parts
    1. Including CSS and Javascript files (jQuery library & widget in that order). Each file only needs to exists one time on a page regardless of how many widgets you have on that page. You can include the Javascript files at <head> section or by the end of the page.
    2. Placing the container DIV where you want widget to appear, setting class attribute as "related-posts-widget" to have widget automatically loaded! And setting widget options either in an inner HTML comment or in a HTML5 attribute 'data-options'.
    3. Although previous parts are all you need, You can still call widget at document-ready on a HTML element identified by some selector and pass options in the method call.
  • Plugin was also tested to work with jQuery v1.3.2 and v1.2.6, Just replace jQuery Javascript source to "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
    Or "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"
  • Post thumbnail is usually the first image you insert in the post and it is automatically extracted by Google Blogger and that image must be uploaded to PicsaWeb - directly or through Blogger post editor.

New Features

  1. Display related posts with/without thumbnails.
  2. Since, images added to Blogger posts are uploaded to PicasaWeb, you can use many custom thumbnail sizes.
  3. You can use one of 2 CSS styles to help you get started quickly.
  4. Display posts with transition effects or as a fixed list.
  5. Many transition options are available like opacity, width, height, font-size.
  6. Optional timeout technique is used to finish widget loading when one or more feed requests were not completed successfully, instead of waiting indefinitely.
  7. Thumbnails loading is delayed until widget has finished aggregating related posts to avoid loading extra images
  8. You can customize it by placing optional parameters -like custom animation- in a HTML comment or HTML5 data attribute.
  9. You can disable widget if current page is not a post page.
  10. Widget was rewritten as a jQuery plugin, use a typical jQuery call to load it or auto-load any number of div elements with "related-posts-widget" class in the same page.

Old Features

As in version 1.0, this widget..
  1. Is easier. No need to edit your Blogger template.
  2. Is smarter. Posts are aggregated and sorted according to post tags that are already displayed in post page.
  3. Is optimal. It queries summary feeds of your blog instead of querying default feeds that return full contents.
  4. Can work as recent posts widget too.
  5. Can work with fixed list of tags instead of using current post tags.

83 comments

  1. Swashata // September 18, 2010 at 4:09:00 AM GMT+10  

    Simply awesome :) If you have time, then can some of your tutorial can you please explain, how you achieve the transition effects? Looking at the source code, I found that you almost do it like faking an animation effect from opacity 1 to opacity 1. It would be really nice to read from your tutorial.

  2. Mike // September 18, 2010 at 6:42:00 AM GMT+10  

    @Swashata,
    Thanks my friend.
    Explaining the effects is on my mind :) Hope I will have the time to do it..

  3. Asker // September 18, 2010 at 11:08:00 PM GMT+10  

    Great work Mike.
    really good :)

  4. Mike // September 18, 2010 at 11:29:00 PM GMT+10  

    @Asker,
    Thanks my friend :)

  5. Beben Koben // September 21, 2010 at 6:16:00 AM GMT+10  

    hmmmm...its a full stylish
    amazing...
    thanks a lot for your creativity :)

  6. Swashata // September 25, 2010 at 2:12:00 AM GMT+10  

    @Mike
    Great! Would be waiting for that :)

  7. erwan // November 6, 2010 at 2:24:00 AM GMT+11  

    great....
    i like it.... :)

    thanks...

  8. bloggeriz // November 8, 2010 at 6:33:00 PM GMT+11  

    thanks good widget

  9. Anthony Souls // November 11, 2010 at 12:47:00 AM GMT+11  

    Seemed really cool, although not for me- Seems the related posts are always the same ones. There's no variety too when I included it within each post.

  10. Mike // November 11, 2010 at 9:58:00 AM GMT+11  

    @Anthony,
    Can you give a sample url of the issue..?

  11. nishad // December 9, 2010 at 9:53:00 AM GMT+11  

    wow. thx for such a great tool

  12. Unknown // March 27, 2011 at 10:40:00 AM GMT+11  

    cannot make it work:(

  13. Mike // March 29, 2011 at 12:13:00 AM GMT+11  

    @SeerSucker,
    Send me details about the issue..

  14. Sang Gabriel // April 12, 2011 at 12:34:00 AM GMT+10  

    how to apply the containerselector on this new widget?
    i want it to be placed under my content, but above the comments

  15. Mike // April 12, 2011 at 8:03:00 PM GMT+10  

    @gabanMorka,
    You don't need that, you can just add the code to HTML widget under the post content..
    If you still need to show the widget in some specific container, go to setup page and choose "jquery" in "widget loading" option from the left panel and see how the generated code uses an ID as the container selector..
    If you need further assistance, email me

  16. Unknown // April 14, 2011 at 6:58:00 PM GMT+10  

    Great tool, but how to remove the post when being read, include showing at related post. Please help me, thx

  17. Mike // April 15, 2011 at 7:24:00 AM GMT+10  

    @Christio,
    I'm not sure what you need, can you email more details about the issue and URL of the blog?

  18. Anonymous // May 4, 2011 at 9:16:00 PM GMT+10  

    Hi, I used this widget but its showing me only titles of my blog but i want to show the some part(text part)of blogs also. so can you please suggest me how can i do this?

  19. Mike // May 5, 2011 at 8:32:00 AM GMT+10  

    @Chetan,
    Can you explain your issue again, or email me for more details.. also, let me see a sample link..

  20. Anonymous // May 5, 2011 at 3:01:00 PM GMT+10  

    I am using this widget in my website which is not uploaded yet. by using this widget i can see my blogs in my website but its showing me only image & title of my blogs but i want to show blog text also on my website. please give me some suggestion.

    Thanks in advance......

  21. CP // May 14, 2011 at 10:34:00 PM GMT+10  

    Great plugin Mike !
    But I have a problem using the "Post Pages Only?" option. On my stand-alone page the widget appears showing "loading.." inside it.
    You can se an example of this at http://selogeek.blogspot.com.

  22. Mike // May 14, 2011 at 10:51:00 PM GMT+10  

    Good point @CP,
    You need to remove the "loading.." text inside HTML code of the widget..

  23. CP // May 15, 2011 at 11:25:00 PM GMT+10  

    Thanks for your help Mike, did as you said and it's better. I still have the empty widget border though.

  24. Mike // May 16, 2011 at 5:20:00 AM GMT+10  

    You welcome @CP,
    try doing few CSS changes on some div classes like [".main-inner .widget",".widget-content"]. try something like setting vertical padding to 0 in order to hide it when it is empty..

  25. Mike // May 16, 2011 at 6:50:00 PM GMT+10  

    @Chetan,
    Sorry that plugin doesn't display posts summaries.. maybe on next version..

  26. Aaron Williams // June 27, 2011 at 5:51:00 AM GMT+10  

    ive tried a few of these things now and this is just another one that fails to work. i got the widget saying 'loading' and thats about it

  27. Mike // June 27, 2011 at 6:37:00 AM GMT+10  

    @Aaronreaction,
    email me sample url and more details so I could help you.

  28. Anonymous // August 5, 2011 at 4:32:00 AM GMT+10  

    I do not have any problem in application of this HTML script.i am running 3 blog and i applied this for all my blog.and works perfectly.i just need to know that i want to Show posts from my another blog(i.e) my 1-st blog post should appear in 2-nd blogs related post ! is it possible pls replay soon !!

  29. Mike // August 5, 2011 at 5:05:00 AM GMT+10  

    @Anonymous,
    you can set plugin option "blog_url" to any Blogger blog address. But to get related posts from another blog, the 2 blogs should have common tags/labels. (In blogger, tags are case-sensitive!)

  30. Mike // August 6, 2011 at 10:07:00 PM GMT+10  

    @Haz,
    I check your blog and the plugin looks working fine.. If you have 2 specific posts with different labels and are showing the same related posts then please send me links to my email..

    You should use one jQuery only on a page! Use latest version of jQuery that supports all the plugins you are using..

  31. Mike // August 6, 2011 at 11:20:00 PM GMT+10  

    @Haz,
    Have you tried to use jquery 1.3.2
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

  32. Mike // August 8, 2011 at 4:12:00 AM GMT+10  

    @Haz,
    I did a little change in the plugin to make it run with jquery 1.2.6
    You don't need to change anything, the plugin is actually working on your blog now :)

  33. Mike // August 8, 2011 at 7:06:00 AM GMT+10  

    @Haz,
    please contact on my email as this is out-of-scope for this post..

  34. DILIP VAMANAN // August 15, 2011 at 3:30:00 PM GMT+10  

    I have tried to integrate to nmarketers.com. I have added the scripts in head and related post div just after post.body.

    But it is getting stuck at Loading.. I can't see any related posts. Am I missing something?

  35. Mike // August 15, 2011 at 10:14:00 PM GMT+10  

    Hi Dilip,
    I replied to your email about that issue. Anyway, the problem was having more than one jQuery plugin included in the page..

  36. DILIP VAMANAN // August 19, 2011 at 5:02:00 PM GMT+10  

    Hello Mike,

    Thanks, I guess your mail might have gone to spam filter :(. Yes there is already a jQuery in the page. So in this case, what can be done ?. How can I make the related posts plugin active ?

    Dilip Vamanan

  37. Mike // August 19, 2011 at 10:42:00 PM GMT+10  

    @Dilip,
    you are including 4 jquery versions on your page, which is no good..

    you should use 1 version only, I suggest using the latest one 1.4.2, if some plugin didn't work with 1.4.2 then use 1.3.2 or 1.2.6

    order of including jQuery plugins and related CSS in any page should be like this:
    1) Related CSS files
    2) jQuery library
    3) any jquery plugins

  38. Leadership Team // August 20, 2011 at 12:58:00 AM GMT+10  

    Hello Mike,

    Thats right, I was using jQuery in another plugin. Now to just verify I have removed that. In the HTML source, there is only one jQuery version include.

    But still no related posts ;(

    site name : nmarketers.com or in any other page.

  39. Mike // August 20, 2011 at 1:10:00 AM GMT+10  

    @Leadership,
    but the jQuery plugin itself is not included :
    <script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

  40. cayun // August 28, 2011 at 1:25:00 PM GMT+10  

    it's great, thanks

  41. Sandipan // September 7, 2011 at 5:25:00 PM GMT+10  

    Excellent Work. This works very well. Thank You so much.

  42. jntribolo // November 5, 2011 at 3:29:00 AM GMT+11  

    Simply the best around. I have a 5 years old blog and the widget crawls like a charm.

  43. Anonymous // November 5, 2011 at 7:39:00 AM GMT+11  

    Help! Perhaps I'm doing something wrong... Instead of "Related Posts" I'm getting "Recent Posts." I made sure to mark "Related Posts" in the setup (fixed tag/label), and I'm still only getting "Recent Posts." Also, I'm not getting thumbnails, just links (titles). Thanks in advance. :-)

  44. Mike // November 5, 2011 at 7:56:00 AM GMT+11  

    @RoadTested,
    Does the page includes post labels?
    Can you send me your link to check it out..

  45. Galatema // November 21, 2011 at 11:25:00 PM GMT+11  

    vertical appearance on my blog, how to display horizontally??
    Thank you Mike

  46. Mike // November 22, 2011 at 9:44:00 AM GMT+11  

    @Galatema,
    1) include CSS file at the start of widget code..
    <link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />

    2) set option "title" to 0 to hide post title..
    ,titles:0

    try this.. for further help please email me.

  47. tcokli // November 22, 2011 at 8:25:00 PM GMT+11  

    Great wiget, thanks!
    But I have a same problem as Galatema: they displays vertically )

    You recomendations does not work...

  48. Mike // November 22, 2011 at 9:18:00 PM GMT+11  

    @tcokli,
    can I have the url?

  49. tcokli // November 22, 2011 at 9:27:00 PM GMT+11  

    Sure
    http://tcokli.blogspot.com/

  50. Mike // November 22, 2011 at 9:34:00 PM GMT+11  

    @tcokli,
    try to set option "title" to 0 to hide post title..
    ,titles:0

    For further help please email me..

  51. tcokli // November 22, 2011 at 9:49:00 PM GMT+11  

    thank you! i got it!

  52. Anonymous // December 1, 2011 at 5:26:00 PM GMT+11  

    Thanks for this great widget.
    When I place it as a HTML/JavaScript gadget on my sidebar, it shows up very well.
    But I need it to appear below my post. What do I need to do to place it there?

  53. Mike // December 2, 2011 at 9:44:00 AM GMT+11  

    @The Lost Observer,
    You can place code in another HTML/JS widget below the post.
    If you are familiar with Blogger template, you can manually place the code there.
    For further assistance, please email me.

  54. Unknown // December 16, 2011 at 5:35:00 PM GMT+11  

    Great plugin......

    i m getting a problem to install this plugin problem is that it showing me thumbnails when i insert code directly in my template but if i use same code in html/javascript element it will not showing any thumbnails

    where i am doing wrong can you plzz help me out

    i want that it will not show me any thumbnail when i use the code in my template directly


    my blog address is allmytutorials.blogspot.com

  55. Mike // December 16, 2011 at 10:44:00 PM GMT+11  

    @Sudhir Dudeja,
    You need to set "thumbs" option to 0 as in demo 1.
    Also, check plugin options for more info.

  56. Unknown // December 17, 2011 at 3:17:00 AM GMT+11  

    @mike

    thx for your reply

    i did it .

    i did every thing but i am not able to get transition effect with no thumbnails when i insert that code directly in my blogger.But when i add that code to html/javascript element i get transition effect with no thumbnails .

    i want to add these plugin below my post so i need to insert code directly in it.

  57. Mike // December 21, 2011 at 9:49:00 AM GMT+11  

    @Sudhir,
    You need to use option "show_n".. Please, refer to plugin options for more info.

  58. Dani // January 17, 2012 at 3:57:00 PM GMT+11  

    Wowww perfect widgets , it reallty fits on my template , ,

  59. Sanam // January 28, 2012 at 5:57:00 AM GMT+11  

    Hi, i tried getting this widget but once I had put it onto my blog nothing came up, all that I can see is "loading..." on the sidebar. If you could help me out i would really appreciate it!

    My blog is http://www.daybydiva.com/

  60. Mike // January 28, 2012 at 6:37:00 AM GMT+11  

    @Sanam,
    The problem is that jQuery script is included twice in your blog.. You need to include it once in your page <head>

    * For more info please email me..

  61. Anonymous // January 29, 2012 at 6:14:00 AM GMT+11  

    sir this related post widjet not working it seem recent post please tell me about this query from http://todayprice.in how to add related post widjet

  62. Mike // January 29, 2012 at 6:51:00 AM GMT+11  

    Hi Anonymous,
    The widgets works fine in homepage since posts labels(tags) are their, but in post page labels are missing! Widget needs those labels to get related posts!

  63. ggg // February 8, 2012 at 12:25:00 AM GMT+11  

    Hi
    Thank's for widgets
    in I tried the widgets Demo 3 I have a variation of picture size.
    And I want to remove a Related Title

  64. Mike // February 11, 2012 at 12:50:00 AM GMT+11  

    @TheGame,
    please email more details on the issue and your url

  65. ggg // February 11, 2012 at 10:56:00 AM GMT+11  

    Hi Mike
    ok this my blog I add widgets Related post demo 3
    http://games-for-game.blogspot.com/
    as you see it, there is a variation of size.
    I tried to make it correct but I have not found the solution.
    exemple for size Width: 300px And Height: 150px

  66. Mike // February 11, 2012 at 11:23:00 AM GMT+11  

    @TheGame,
    try a cropped thumb_size like this 's104-c', it will return images exactly 104x104 pixels..

    For info, plz refer to plugin options
    http://code.google.com/p/blogger-related-posts/wiki/Options_v2

  67. Smart // February 17, 2012 at 12:46:00 PM GMT+11  

    I couldn't get that working on my blog

  68. Mike // February 17, 2012 at 10:04:00 PM GMT+11  

    @Smart,
    please email me more details and your url..

  69. Ezio // February 26, 2012 at 5:48:00 AM GMT+11  

    Thank you Mike, very clever solution.

  70. Mike // March 27, 2012 at 8:16:00 AM GMT+11  

    @Jasmine,
    you are using many jQuery scripts in the same page, you should pick the version that works with all plugins you have..

    please email for further assistance.

  71. Mike // March 27, 2012 at 7:35:00 PM GMT+11  

    @Jasmine,
    you need to check your template or html widges for jQuery scripts and eliminate them.. and include just one jquery script at the head of your template. Choosing the right version is by try & error!

    please email me for further assistance.

  72. Gawak // April 7, 2012 at 9:34:00 PM GMT+10  

    one of the greatest widgets i ever find.. THANK YOU !

  73. Mike // June 8, 2012 at 5:54:00 AM GMT+10  

    @G Raju,
    please email me your issue in details..

  74. Eric // June 12, 2012 at 12:48:00 PM GMT+10  

    Hi, I love this widget! It looks great when I add it as a widget in Layout mode, without titles, horizontally, and place it under the post as a widget. However, I want the 'Related Posts' to show up in between the shared buttons and the comment section, not under the entire thing. I added the code, straight up copied and pasted it...but when I did that the titles of my related posts show up, even though they didn't show up the other way. I'll leave them there for a day or two so you can see but then I'm taking them down. The code reads:
    ,thumb_size:'s104-c'
    ,titles:0
    so I'm not sure what's wrong?
    I'm at focusonthebeer.com

  75. Mike // June 13, 2012 at 6:46:00 AM GMT+10  

    @Eric,
    Not sure what is the issue since you removed the widget..
    You can't put it between post and comments unless you edit the template and add it manually.
    If need further help, plz email me.

  76. MTS Collective // July 3, 2012 at 1:53:00 AM GMT+10  

    Thanks so much for the widget! I'm using it on my site and it's very helpful

    Could you please set a condition to display the text "None" if there are no existing related posts? Often I create posts with new labels and as there are no related posts, only the "Related Posts" title is displayed with nothing below, which looks awkward. Thanks again!

  77. Mike // July 3, 2012 at 5:47:00 AM GMT+10  

    @Mario,
    Thanks for your feedback..
    Try to replace the text "loading.." in widget code with "none" so it will show none when no related posts were found.

  78. Unknown // December 16, 2012 at 3:42:00 AM GMT+11  

    This is a cool Widget for the Blogger blogs, this is the one i was looking for my blog Inity Jobs.
    Thanks a ton!

  79. Anonymous // February 28, 2013 at 2:54:00 PM GMT+11  

    I have problem with this. I can't remove it on home page. I want it only show on detail of articles page.

  80. Ambreen // March 2, 2013 at 12:54:00 AM GMT+11  

    Amazing job ... thanks :)

  81. Unknown // June 13, 2013 at 1:33:00 PM GMT+10  

    Wow..great works bro :) Thanks for it!

  82. Unknown // July 8, 2013 at 3:08:00 AM GMT+10  

    Please tell me!!.How can I change the number of posts more than 25 posts?

  83. costumingdiary.com // April 10, 2014 at 3:15:00 AM GMT+10  
    This comment has been removed by the author.

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
More Tech Tips! | Technology tips on web development

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