Recent Comments Widget with CSS effect

Hello friends, I am back with a new widget for blogger that exposes the visitors activity on your  website or blog. Recent Comments Widget is not a unknown widget to a blogger but the same with the new CSS effect is definitely not known.

You can watch the DEMO of the widget which was installed on a sample blog on the internet.

Recommended To You: Random Posts with Thumbnails Widget

Adding the Widget

To add this widget on to your blogger, go to Layout > Add a Gadget > HTML/JavaScript, paste the following code in it and Save.

<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&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Customizing the code

You can customize the code as per your requirements. You can change,

numComments=5 to your desired number.

showAvatar=true to false if you don’t wanted to show the avatar of the commenter.

roundAvatar=true to false if you don’t want the default style of the commenter’s Avatar to be changed to round shape.

charachters=40 to your desired length.

defaultAvatar’s URL to your desired image URL.

hideCredits=true to false  if you wanted to display the credits of the code.

maxfeeds=50 to your desired length and

Replace ‘Your Name’ in adminBlog=’Your Name’ with your name.