Recent comment widget for blogs with avatar

Blogger Widget,

Rate this posting:

{[['']]}

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Hello friend's

Today i am going to show you how to add an beautiful recent comment widget for blog with avatars. In this widget whenever someone made a comment on your post than it will show, who has commented recently.

This recent comment widget comes with round avatars and you can change anonymous avatar image with your favourite image.

Here is the live demo of the widget:

Add recent comment widget to your blog

• Go to Blogger Dashboard>>Layout>>Add a gadget>>HTML/Javascript
• Now add this code in it.

<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 =60, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = " http://www.gravatar.com /avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src=" http://helplogger.googlecode.com /svn/trunk/w2b recent comments with avatars.js"></script> <script type="text/javascript" src="http://widget-for-blogs. blogspot.com/feeds/comments /default?alt=json& callback=w2b_recent_comments& max-results=5"></script>

• Replace "http://widget-for-blogs. blogspot.com" with your blog address.
• Replace "http://www.gravatar.com/avatar /?d=mm" with your avatar image.
• Now save it.

HAPPY BLOGGING!

Get Free Updates in your Inbox

Follow us on: