Recent Comments Widget With Avatar

Having a Recent Comments widget on your Blogger blog is a great way to give you and your site visitors an idea of how much activity and interaction your site gets from its readers. But wouldn’t it be nicer if you could also put the commenter’s avatar together with it to make the commenter more identifiable?
Well, here’s a nice simple widget that will give you just that: a Recent Comments widget with an avatar.

1. Head over to the ‘Design’ page of your Blogger dashboard then go to ‘Layout’
2. Click on an ‘Add a Gadget’ placeholder
3. Select ‘HTML/JavaScript’ on the gadget list
4. Copy and paste the code below:

<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;

}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments  = 5,

showAvatar  = true,

avatarSize  = 40,

roundAvatar = true,

characters  = 40,

showMorelink = false,

moreLinktext = "More »",

defaultAvatar  = "http://www.gravatar.com/avatar/?

d=mm",

hideCredits = true;

//]]>

</script>

<p style="display:none;">Recent Comments Widget for Blogger With Avatar For Blogger 

by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>

<script type="text/javascript" 

src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>

 <script type="text/javascript" 

src="http://yourblogname.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-

results=5"></script>

5. Now before you hit on that ‘Save’ button, be sure to change “yourblogname.blogspot” with your own blog’s URL.
Here are some of the widgets attributes you can switch on and off and alter to make it appear according to your preferences:

• To change number of comments find this numComments = 5
• If you don’t want to show avatar then find this code showAvatar = true and change value to ‘false’
• To change avatar size, find this code avatarSize = 40
• If you don’t want to show rounded avatars then find this code roundAvatar = true and change value to ‘false’
• To set maximum number of characters, find this code characters = 40
• To show more link find this code showMorelink = false and change value to ‘true’
• If you enable show more link value then you can change the text which shows more link. Find this code moreLinktext = “More »”
• To change default avatar image find this code defaultAvatar = “http://www.gravatar.com/avatar/?d=mm”

6. Hit ‘Save’