Create Beautiful Recent Comment Widget With Avatar on Blogger

Create Beautiful Recent Comment Widget With Avatar on Blogger
Recent comment is a cool widget for me, official blogger team has released the recent comment widget. But that's to simple, so now i will share a recent comment widget with avatar on blogger. Its a beautiful recent comment widget i had ever seen haha
So this is it, Create Beautiful Recent Comment Widget With Avatar on Blogger

You can see the preview on my sidebar, "Recent" on tab navigation.

The Step
1. Login to blogger
2. Go to design - add a gadget
3. Paste this 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     = 50,
    roundAvatar    = true,
    characters     = 70,
    showMorelink    = false,
    moreLinktext    = "More ",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogyahyagan.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

4. And save it.

Recent Comment Widget

Just Info
NumComments = the numbers of comment that will showed on your site
ShowAvatar = true/false
AvatarSize = the size of avatar you will used
roundAvatar = true/false
characters = the max character that will showed
showmorelink = true/false
morelinktext = the "more" link text that will showed
defaultAvatar = the url of default avatar
hideCredits = true/false (Credits Way2blogging)

ok maybe that's it. Create Beautiful Recent Comment Widget With Avatar on Blogger.
Please Subscribe us, and share this article into your social network 

Next Post 25 Dofollow Blog List With PR 5-3 2012