Simple Blogger Tutorials

Related Posts Widget with Image Thumbnail for Blogger

Related posts widget is demanding for Blogger users as this help your blog readers to know about your older posts. While there are many widgets available on different blogs, there aren’t many which are more customizable than this one which I will be sharing with you.

Why more customizable? It’s because you will get both Related Posts and Recent Posts widget which can be a link list, link list with image thumbnail or with only thumbnail with popup title, transition effects and above all, it’s fast. This is one of the best widget for Blogger ever made and found on the web.

Mike More of More Tech Tips made this widget by using the awesome feature of jQuery. The installation is also very easy. Let’s start with it.

So first you have to visit easy setup page and choose the options you like to have. To start with live examples, you can visit demo 1, demo 2, demo 3 or demo 4. After selecting the correct options click “Update Demo and Code”.

After generating you will find required scripts and codes under the Code section. There are two parts. First is the jQuery library, jQuery plugin, which will run the related post widget and the CSS. Second is the required HTML part. Here is an example image, click to enlarge:

Related Posts widget code

To add the first part to Blogger, follow the steps below:

Step 1: Go to Dashboard > Page Elements > Edit HTML tab.

Step 2: Find ]]></b:skin> tag and below it add the jQuery library and the plugin, which is required, and the CSS files, if needed. Example:

<!-- CSS (required if needed) -->
<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />

<!-- jQuery Library (required only once) -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/>

<!-- jQuery Plugin (required) -->
<script type='text/javascript' src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js'/>

If you have previously added the jQuery library then you need not to add another one, just check if it’s latest or not (marked in red) and if not the latest, then you can replace it.

If you have selected Widget Loading option to “jQuery method call”, some extra script code will appear in the Code section under Calling widget, example:

<!--~~~~~~~~ Calling widget --> 
<script type="text/javascript"> 
//<![CDATA[ 

$(document).ready(function(){ $('#related-posts-widget').relatedPostsWidget(); }); //]]> </script> <!--~~~~~~~~~~~~~~~~~~~~~~~~-->

This should be added just before closing </head> tag.

Step 3: Save your template.

Step 4: Adding the second part is easy. You can add it anywhere you like. You can add it to sidebar or within and below post.

  1. If you want it to add to sidebar then go to Dashboard > Page Elements tab and add the required HTML by adding a HTML/JavaScript gadget.
  2. If you want it below post then go to Edit HTML tab and check “Expand Template Widget”. Find <data:post.body/> and below it and the required HTML. Example:
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --> 
<div class="related-posts-widget"> 

<!-- { thumb_size:'s104-c' ,titles:0 ,max_posts:12 ,tags:[] ,show_n:4 ,animate:'width' } --> loading.. </div> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

If you have selected Post Pages Only option to No then put the generated required HTML code into conditional tags.

<b:if cond='data:blog.pageType == "item"'>
Generated required HTML
</b:if>

This ensures that it picks up correct related posts.

Step 5: Save your template.

Notes:

To have the thumbnails for your widget, your post images should be hosted on Picasa Web. For Bloggers who don’t know, when you write your post in Post Editor and add images from there, the image gets automatically uploaded to Picasa Web.

You can find more detailed options in:

If you are having any problem with this related post widget then ask Mr. More on his original post to get better answer.

24 comments :

  1. dear raju i have done as you said but it is not working please suggest me what went wrong in my side.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. sorry to ask again.. i already install this widget.. but the widget not change automatic like urs by labels.. only the same related post.. not change to another post labels..

    ReplyDelete
  5. @Angel
    Have you added the 3rd part?

    @Haz Issac
    You need to set Posts Per Transition to half for what you have set your Max Posts to appear. This should bring the the transition effect.

    ReplyDelete
  6. i already change the post per tran to 5, but nothing change.. still same.. ok, if my blog max post is 5 result, so i should set posts per transition to 2 or 3 like that?

    ReplyDelete
  7. ya i have done as per the instruction twice i have checked but nothing working.please help me.

    ReplyDelete
  8. dear raju i have checked there are three in my template when i am putting the code after 2nd then its working but my labels are also squeezed.
    Still i am doind some mistake please suggest me wat to do.

    ReplyDelete
  9. @Haz
    Yes, that's exactly what is needed to be done.

    @Angle
    Please let me know where have you added the third part. If you have removed it form your blog then add the third part and let it be there until I check your blog and get the problem details to help you.

    ReplyDelete
  10. thanks raju.. its working good now.. but i have 1 problem.. when i upload the script from easy setup page, the script to i upload is 1.4.2 jquery.. when i add to my template, my multilevel menu, recent post n comment tab not working coz i using the latest 1.6.2 jquery..

    then, when i delete the 1.4.2 jquery n use the 1.6.2 jquery, all working good except the related post widget.. nothing to appear at related post.. so, what should i do?

    ReplyDelete
  11. Oops.. there were typos which have I fixed and updated the post. Please redo from step 2.

    ReplyDelete
  12. ok, now my multilevel, recent post n comment working good.. but, the prob now nothing appear at related post.. i have to use the 1.4.2 jquery code to make a related post working as from easy setup page that should do the code, but if i use the 1.4.2 code, the else not working..

    let me explain.. before this the code add above /body right? when i add the code from easy setup page use the 1.4.2 jquery, the related post working good.. but multilevel, recent post n comment not working.. then when i add the code before /head, the multilevel, comment tab working good but nothing appear at related post.. whats the problem now raju? i already confius..

    as u said 'If you have previously added the jQuery library then you need not to add another one, just check if it’s latest or not (marked in red) and if not the latest, then replace it' .. i use the latest 1.6.2 jquery, but to make the related post working i should use the 1.4.2 jquery like from easy setup page..

    i really2 confius now.. i looks ur page working good the widget!
    :(

    ReplyDelete
  13. hai raju.. the widget is working good at my blog now.. i already refer to mike whats the problem and finally he help me solved the problem.. thanks for this widget and tutorial raju :) i will make a post for this n refer from ur site.. thanks again ..

    ReplyDelete
  14. Haz, I was going to reply you yesterday but for bad weather my net connection was not working. However, for your knowledge (and for others too) I would like to point out some mistakes that I had found out yesterday.

    Your step 2 scripts were before closing body tag.

    You were using two jQuery library scripts which could create problem:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

    And

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

    You should have one. First try latest version whether it works or not then try the older versions.

    While checking your blog today I have found that everything is okay.

    ReplyDelete
  15. yes.. the widget now working great! but can i ask? how to do seperate collum like urs? the sosial bookmarking at the left n the related post at the right.. but i wanna add the related post at the left and ads at the right.. how to do that?

    ReplyDelete
  16. thx for ur useful post
    i really liked ur post
    that help me to generate related post
    but it shows vertically
    i want it to show like horizontally...

    plz help me as soon as possible

    ReplyDelete
  17. State your blog address and add the related post widget and leave it as it is until I see and find a solution.

    ReplyDelete
  18. I was looking for a way to create a "Featured Posts" page for my blog and I found this on "MoreTechTips".
    Well, related post worked fine for me but 'Related Post With Fixed Tags" is a disaster for me (this is what i was eager for. I have tried every possible steps for this and yet no result.
    If you can make this work for me, i will surly appreciate

    ReplyDelete
  19. Have you asked Mr. More on his post about the Related Post widget? Ask him and also tell him the problem you faced. This will let him fix the issue and create a more updated widget.

    ReplyDelete
  20. @Reyad010,
    If you still have a problem with fixed tags, then email me a sample link on Mike[at]MoreTechTips.net

    Thanks @Raju for featuring my plugin on your blog :)

    ReplyDelete
  21. thanks for sharing useful related posts widget tutorial

    ReplyDelete
  22. useful tips. I have related post in my blog but the problem s dat it doesnt display as a random order with regards to label.

    ReplyDelete
  23. If it's regarding this widget then provide your blog's URL as it will help us to help you.

    ReplyDelete

Don't SPAM! Read comment policy.

Like