Top Commentators Professional Widget For Blogger

Improve traffic to your site by encouraging readers to leave comments on your blog. And what better way to motivate them to comment than to have their names displayed on your blog. Top Commentators widget will display the list of people who commented the most. Each name is linked to the commentator’s Blogger profile or web site.

Top Commentators Blogger Widget

How to add "Top Commentators Professional Widget" to Blogger 

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the window.
6. Enter the title of your widget e.g. Top Commentators.
7. Click Save.

<!-- Top commentators widget v1 Start --><style type="text/css">.top-commenter-line,.top-commenter-line a, .top-commenter-line .profile-name-link a{font-family:, arial, sans-serif;color: #fff; text-decoration: none;font-size: 14px;}.top-commenter-line:hover,.top-commenter-line a:hover, .top-commenter-line .profile-name-link a:hover{color: #fff; text-shadow: 0px 1px 1px #000000;font-size: 14px; text-decoration: none;}.top-commenter-line {margin: 3px 0;}.top-commenter-line .profile-name-link {padding-left:0;}.top-commenter-avatar {vertical-align:middle;}ul.top-commenter {list-style:none;margin:0;padding:0;}.top-commenter li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}.top-commenter li.top-commenter-avatar{ 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;}.top-commenter-avatar{
border:solid 2px #fff;
width:25px;
height:25px; }.top-commenter li img{padding:10px;position:relative;overflow:hidden;display:block;}.top-commenter li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}</style><script type="text/javascript"> var maxTopCommenters = 5; var sizeAvatar = 60; var urlAnoAvatar = 'http://www.gravatar.com/avatar/?d=mm&s=' + sizeAvatar;</script><script type="text/javascript" src="http://olusegun-fapohunda-calculator.googlecode.com/svn/www.justnaira.com-top-commentators.js"></script><script type="text/javascript" src="http://www.digitalhubinc.com/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></script><!-- Top commentators widget End -->

Customizing Top Commentators widget

Simply change the Website Homepage link http://www.digitalhubinc.com to your blog's URL. 

If you want to change the Avatar border , width and height then change these values :    

.top-commenter-avatar{border:solid 2px #fff;width:25px;height:25px; }

Hopefully , You enjoy this article. If any problem face related article then comment on below place. Please share this article on social media.