TUTORIAL™

<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 3px !important;padding:0 0 0px 0 

!important;display:block;clear:both;overflow:hidden;list-style:none; border:0px solid black; border-radius:5px; padding:3px; 

font-weight:bold;}
.w2b_recent_comments li .avatarImage{-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
padding:3px;background:transparent;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;}

.w2b_recent_comments li .avatarImage:hover{height:100%;
-o-transition:all 1.0s ease-in;
-moz-transition:all 1.0s ease-in;
-webkit-transition:all 1.0s ease-in;
border-radius:5px;
background:#ff9b00;
background:-moz-linear-gradient(top, #ffda4d, #ff9b00);
background:-webkit-gradient(linear, left top, left bottom, from(#ffda4d), to(#ff9b00));}

.avatarRound{border-radius:100px;
width:30px; height:30px;
-o-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-webkit-transition:all 1.5s ease-out;}
.avatarRound:hover{width:50px; height:50px;
-o-transition:all 1.0s ease-in;
-moz-transition:all 1.0s ease-in;
-webkit-transition:all 1.0s ease-in;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{ overflow:hidden;
height:15px;
margin-top:3px;color: #000;display: block;font-size: 10px;font-style: normal;line-height: 1.4; padding:3px; 

border-radius:5px; border:1px solid black;
background:#e0e0e0;
background:-moz-linear-gradient(top, #3b5998, #e0e0e0);
background:-webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#e0e0e0));}
.w2b_recent_comments li span:hover{height:100%;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border-radius:5px;
background:#ff9b00;
background:-moz-linear-gradient(top, #ffda4d, #ff9b00);
background:-webkit-gradient(linear, left top, left bottom, from(#ffda4d), to(#ff9b00));}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 50,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 500,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://selladrt.googlecode.com/files/Recent%20Comments%20Widget%20Blogger.txt"></script>
<script type="text/javascript" 

src="http://www.bloggertutoria.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=50"></script>