Stylish Recent Comments Widget with Thumbnail Avatars For Blogger

Every Blogger wants their blog to look beautiful and professional. We add many blogger widgets to make it beautiful like Popular Posts, Animated Page Loading Effect etc. One of the must use widget is Recent Comments widget. By this widget we can show our visitors the most recent commentators and their comments. This widget also bring up more professional looks to your blog because it also shows thumbnails avatars along with the comment. This widget includes no JQuery or Javascript so it won't effect your blog loading speed. You can see that many popular blogs have recent comments widget on their sidebar it is because it attracts visitors to comment on the site. This is a must use widget as you can see this widget at our footer also. So if you like this widget and wants to add it to your blog then start rolling your fingers on it.

Adding Recent Comments Widget With Avatar To Blogger?

1, Go to Blogger Dashboard > Layout.
2. Click on Add a Gadget > HTML/JavaScript.
3. Paste below code and save it.

<style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_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;}    .latest_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;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/12251714239/mybloggerbuzz-com.js"></script><script src="http://www.mybloggerbuzz.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

4. Now change mybloggerbuzz.com with your own blog URL.

Customizations (Optional):

• To change number of comments find this numComments = 5,
• If you don't want to show avatar then find this code showAvatar = true
• To change avatar size find this code avatarSize = 40
• If you don't want to show rounded avatars then find this code roundAvatar = true
• To set maximum number of characters find this code characters = 40
• To show more link find this code and change value to true showMorelink = false
• 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

5. Now save you widget.

Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati