Clean Recent Comments Widget for blogspot/blogger

Comments Plays a important role in any websites or blog! so to make the viewers to encourage placing comments recent comments widgets may play an important role. so here is a step by step guide for making awesome recent comment widgets.

Step1: Just go to your Blogger Dashboard and Click on Layout on Left tab.

Step 2: Now Click on Add a widget (It will display many "add a widget" Option so choose the correct place where you want your widget to appear and then press Add a widget)

Step 3: After clicking on Add a widget a pop-up box will open with many options and there choose HTML/JavaScript option

Step4: Now paste the following code in the Empty Space given on  HTML/Javascript option.

<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>

That's All now your Awesome Recent Comments Widget is ready. go and See your Blog!