Ads Top

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)

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.