Recent comments script for Blogger

By on July 6, 2014

If you are interested in adding a “recent comments” section on your blog, the following script is the perfect tool for you.
A “recent comments widget” can be useful for you and for the users to track the latest comments on your blog and it also gives it a dynamic content advantage. This can make your users more interested and more active on your blog.
The default “recent comments” widget of blogger is not very effective, as it moves pretty slow on showing the latest comments and it doesn’t have a very user friendly look (users usually like to show their avatars and the default widget doesn’t do that).
The following script also has the advantage of changing the CSS style (colors, fonts, etc) so it fits your template and you can also change the default image for the Anonymous users.
The widget looks something like this:
recent_comments_widget

Ok, so let’s get started step by step:
1. Login into your Blogger account, go to Dashboard -> Layout and click on add a gadget.
add-a-gadget-blogger-layout

2. In the pop-up window choose HTML/JavaScript as shown below:

html-javascript-blogger-gadgets-widgets

3. Copy & Paste the following code in the textarea box:

I’ve pointed out in red text some options which you might whant to change:

  1. First of all you will have to change the “http://yourblogname.blogspot.com” (on line 26) with the link of your blog so the script can load the comments from your feed.
  2. There will be displayed 10 comments by default. In order to increase / decrease the number of displayed comments, you have to change the “10” (on line 14) values.
  3. To change the  size of the avatars replace the “60” (on line 16)value.
  4. To go back to square avatars remove the “.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}” (on line 6) line.
  5. To change the Anonymous user’s avatar just replace “http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg” (on line 21).

4. After you finish customizing your widget, don’t forget to click the “Save” button and you are done!

I hope this will be helpful for you and you’ll enjoy it.
If something is not clear and you need more help with it, post a comment and I will help you as soon as possible or use the “Contact us” section 🙂 .

Leave a Reply

Your email address will not be published. Required fields are marked *