Recent Comments Widget With Avatar And Hover Effect For Blogger.

Now encourage your visitors to do more comments with this cool Recent Comment widget. This widget looks pretty cool on blog, it is easy to customize and merges with your template design and hence not affecting the looks of your blog.

Sorry widget stopped working !

Demo To add this widget to your blog follow the instructions given below: 

• Log in to your Blogger Account.
• Then go to Dashboard >> Layout >> Add a gadget.
• Now select HTML/JAVASCRIPT from the list.
• Then copy and paste the below code in HTML/JAVASCRIPT content box.

 <style type="text/css">
ul.bh_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bh_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.bh_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;
}
.bh_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.bh_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

.bh_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.bh_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;
}

</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6bGMtALRdyW0c8Xg6ZkE6M37ki6VSWweKNHzKIppdEmvD_E-vUg-og7QYnjq31r9dsJzJQ88qS7Tmk8sf_Bs1wi6fmPyrr4yqI-QEzGkGDSbL80BvW5J5TR_mQz0U5F59SXzbx8e-HdC/s1600/blogger-avatar-1.png",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=5"></script>

• Then save the gadget and you are done, enjoy!.

Customizations:

•   To change the number of comments replace the numComments value shown in red.
•   If you dont want to show avatar image then replace true with false shown in green.
•   If you want to change the avatar size then change the value shown in yellow.
•   If you don't like round avatar then replace true with false shown in blue.
•   To change the number of characters to show change the value shown in purple.
•   If you want a more links to show option then replace false with true shown in pink.
•   If you want to change the "more" text to something else then simply replace "More?" with your desired text shown in gray.
•   And if you want to change the default image then replace the URL shown in orange with your image URL.

Also read:

• Scrolling recent posts news ticker widget for Blogger (Recommended)
• Beautiful Ramadan Lantern widget for Blogger (Recommended)