adf.ly - shorten links and earn money!

Add Recent Comment with Avatar Widget in Blogger

Recent Comments widget with Avatar for Blogger. Recently Blogger updated the Comments API for Threaded Comments on Blogger . That's how the Avatar of Commenter showed using the updated the Comments API. HOW-TO HOUSE also use this widget. Let's know how.


HOW TO INSTALL
1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code in.
<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     = 40,
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="YOUR BLOG URL/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Replace the red code;

numComments     = 5,
• Number of the comment you wanna show

showAvatar     = true,
• set true tor show avatar, false to hide avatar

avatarSize     = 50,
• size px of the avatar

roundAvatar    = true,
true for rounded avatar, false for square avatar

characters     = 40,
• comment word

defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
• Change the URL for new default avatar. Leave it if don't feel wanna change it.

YOUR BLOG URL
• Change it to your BLOG URL (necessary)

4. Save it. You're done.

or you can easily use this way2blogging widget generator


Enjoy guys! Leave your comment.

1 comment:

  1. Thanks for the great widget and clear instructions!

    ReplyDelete

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.