Recent Comments Widget v3 for Blogger

Hello folks, I am back with yet another remake of a widget and this time its the Popular Posts widget originally coded by Danish Harish and later edited by many fellow bloggers. Just like them I have too made a minute change in the widget and added hover animation in it.






Adding the Widget

To add this widget in your blog firstly go to

Blog Title → Layout → Add Widget → HTML/JavaScript.

Add the below given code.

/* Widget By 24-Tips.BlogSpot.Com */ <style type="text/css" scoped> ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;} .allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important} .allbloggertricks_recent li:hover{border:1px solid #ddd; -webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) } .allbloggertricks_recent a {text-decoration:none;} .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;width:35px;height:35px} .allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[ var numComments = 5, showAvatar = true, avatarSize = 35, roundAvatar = true, characters = 40, defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; maxfeeds=50, adminBlog='Your Name'; //]]> </script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-commentsv3.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=allbloggertricks_recent&&max-results=50"> </script> <!-- Widget By 24-Tips.BlogSpot.Com -->

Add the above code and follow the below instructions.

Setting up the Widget

After adding the code check the configuration of the widget.

numComments - Shows the maximum number of comments to show in the widget.

showAvatar - Change to false if you want to hide avatar in the widgets.

avatarSize - The size of the avatars in the widget measured in pixels.

roundAvatar - Change to false if you do not want the avatar to be round in shape.

characters - No. of characters to show in the comment.

defaultAvatar - The picture to be used when a comment has no avatar.

adminBlog - Replace Your Name with the admin's name so his comments can be hidden.

After making all the changes save the template. You are done now. Now you and your visitors can see this awesome recent comments widget on your blogger blog.

Lastly here comes the update notes of this widget.

v.1 - 11.01.2012

Released Script by Harish Dasari

v.2 - 14.05.2012

Script modified by Asep Admin removed Comments

v.3 - 09/15/2013

Script modified by Afandi Kusuma Expanded clickable area Fixed HTML5 validation issues by Kang Ismet Added animation on hover by AllBloggerTricks

More work and the expansion of this widget by fellow bloggers will be encouraged.