Recent Comments Widget With Avatars

Today I am sharing an script for Recent Comments With Avatars that you can also use as a widget in your blog sidebar or footer. The main feature of this widget is the avatars of commentors. Look of the widget is cool and awesome. Check out the screenshot of the Recent Comments widget With Avatars that I am using in this Blogger blog.




Isn't it awesome???


Procedure to get Recent Comments Widget With Avatars in your blog


1) Login in to your blogger account and go to your blogger Dashboard.

2) Go to layout secton and click on Add Gadget option where you want to show the widget.

3) Select the HTML/Javascript option.

4) Give a title name to your widget and add the following code in the content field.
<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 = 3, showAvatar = true, avatarSize = 40, 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://yourblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

You can change the values like number of comments, size of the avatar image, number of characters.

Replace yourblog with the name of your blog

5) Click Save and refresh your blog. Its all done.

1 comment:

Subscribe to: Post Comments (Atom)