Liked

Thursday, 16 August 2012

Pin It

Recent Comments With Avatar : Blogger Widget


In my previous post I share how to add Total Post Total Comment Widget. Now, in this post we discover how to add Recent Comments With Avatar (author image) Widget. This widget shows the latest comments at your sidebar or where you want to show with the image (Avatar) of the commentator. I think this widget is useful because you can check out the comments of the post that are on main page, but probably you never check old post's comment, so add this widget and show the latest comments on your blog's sidebar. 


How To Add Recent Comments Widget


1. Log in Blogger Dashboard.
2. Hit Design Tab.
3. Page element>>Add a Gadget>>HTML/Java Script.
4. Copy the given codes in the content area of HTML/Java Script and give it a title, like Comments or Your precious Suggestions etc.

<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 Settingsvar numComments = 8,showAvatar = true,avatarSize = 50,roundAvatar = true,characters = 40,showMorelink = false,moreLinktext = "More &#187;",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://masttips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Variations:-
1. Replace 
http://masttips.blogspot.com  with the name of your blog.
2. Replace the " 8 " values in blue, with the number of comments you want to appear
3. To change the anonymous avatar, replace the following address with your own image link address 
http://www.gravatar.com/avatar/?d=mm 
4. To change the size of the avatar, replace 
50  value in blue with the size according to the layout of your blog.
5. Save it and you are done !

I hope that this will work for you. If you have any doubt, feel free to ask. 
:) Arvind.
About Arvind Jangid
Arvind Jangid is the founder and editor of Mast Tips and Mast Blog Tips. He Shares the solutions on 'How To Series' & dedicated to share his blogging tips. Follow Him on Facebook or Twitter . See More About Him.

Liked My Post ?


Subscribe to our RSS Feed and We will let you know when we have new posts!
Or get the latest posts via Email
Thanks!

If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

Comments
0 Comments

0 comments:

Click Here To add Comment

Post a Comment

Your Suggestions are valuable for me.

Related Posts Plugin for WordPress, Blogger...

FeedBurner Updates

 

Thanks for Your Arrival !

Recent Comments

Followers

Recent Comments

Your Precious Arrival

free counters

© 2011-2012. MTS-Mast Tips n Tricks All Rights Reserved Arvind Jangid, Sikar, Rajasthan, Ph. +919413159634 . Template by Mast Blog Tips | Back To Top |