Recent Comments Widget With Avatars For Blogger

Recent Comments Widget with Avatars is another awesome style Comments widget,which shows the latest comments of the visitors along with round Avatars.It also shows a lil bit summary of the commenter. Actually we have posted an article which is Beautiful Recent Comments Widget For Blogger , that widget is also awesome,but the main problem with that widget is that is not showing Avatar or Profile Picture with Comments,However This Widget will show a beautiful Profile Picture or Avatar along with name and Comments.This Widget is usually placed at the footer of the blog,however you can place it in sidebar or any where in your blog.

How To Add Recent Comments Widget With Avatars To Blogger

  • Go To Blogger Dashboard >> Then Click On layout >> And Then Click On Add a gadget
  • Now a Box will popup,select HTML/JavaScript
  • Now Copy the below Code/Script and add it into the HTML/JavaScript Box.
<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 = 6, 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://Blog-URL.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>

Changes in Code Before pasting into HTML/JavaScript Box

#1) Replace/Change Blog-URL with your Own Blog URL (e.g ThatsBlogging.Blogspot.com)
#2) Replace 6 in the Code with the number of comments you want to show on the widget.
#3) If you are interested in changing the anonymous avatar, then replace "http://www.gravatar.com/avatar/?d=mm" with your own image URL.
#4) If you want to change the Avatar Size,Replace 60 with your own desired value.
#5) Now Copy the edited Code and paste in the HTML/JavaScript Box and that's it.

So What's Up:- Recent Comments Widget With Avatars is really a cute widget,i hope you liked it,must pass your views,and ask any question free.Stay Blessed,Have a nice Day,Happy Blogging.

The Code Credit Goes to @Helplogger and Harish(Way2Blogging)
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

7 comments:

  1. I have just bookmarked this Blog and I'll be coming here more often... Thanks a lot

    ReplyDelete
    Replies
    1. Thanks for your Kind Words , Dear Visit daily :)
      Ifti!

      Delete
  2. thank for sharing

    thank for sharing men

    this facebook widget is very important thank for sharing to attach add facebook comment box to blogger

    get into pc

    getintopc

    ReplyDelete
  3. I just realized it's really not difficult to add a comment widget with avatars on blogger. All the while I thought it will require a lot of codes. Good thing I was able to read your blog, now I can work on PapersBoard helps to write papers and insert my comment widgets.

    ReplyDelete