Recent Comments Widget with Avatars for Blogger

After successful releasing of Auto Scrolling Recent post widget. As I am very happy for your positive response on auto scrolling posts widget. So today I have another great widget for you. I already shared two recent posts widgets and tons of Social widgets with our readers. That’s why today I have Recent Comments widget. There are many recent comments widgets are available on the internet. So that’s why i have decided to share something cool and decent with our readers. Today our widget will be Recent Comments Widget with Avatars for Blogger.
Recent Comments Widget with Avatars for Blogger

Why to Add Recent Comments Widget with Avatars to Blogger 

Recent Comments Widget with Avatars for Blogger
Comments are also a very important thing to judge a blog. If a blog have 200 posts and have no comments then it will raise alarm to advertisers as well as to new visitors. So If you want to make a good commenting family you must have cool recent comments widget. This widget is perfect for that because of its Avatar feature it can attract new visitors to comment. It also give a professional look to your blog. You can also set an avatar for visitors who don’t have any avatar on their profiles or for anonymous users. This widget also shows some of the content of comment.

How to Add Recent Comments Widget with Avatars to Blogger

1. Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript.
2. Paste the following code in HTML/Javascript box.

 <style type=”text/css”>
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;

.w2b_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;

.w2b_recent_comments li .avatarImage {
padding: 3px;
background: #fefefe;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;

.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;

.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
<script type=”text/javascript”>
// Recent Comments Settings
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "",
hideCredits = true;
<script type=”text/javascript” src=””></script>
<script type=”text/javascript” src=”“></script>

3. Change the highlighted text according to your blog.
4. Now click on save.

Last Words

We are working on a newer version of this widget. Hope you people like this widget. Do share your views about it. If you need any help regarding to this widget then just drop comments in comment box. Subscribe to Bloggiks to get free email updates directly to your inbox.


  1. Zeeshan Ali February 9, 2013
  2. srikanth rao February 9, 2013
  3. Muhammad Touqeer February 9, 2013
    • Waleed Khan February 9, 2013
  4. Ahmad Mukhtar February 10, 2013
    • Waleed Khan February 10, 2013
    • Ahmad Mukhtar February 10, 2013
  5. Maaste Blogerrmen February 20, 2014
  6. Andra Gembara June 2, 2014

Leave a Reply

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