Add Recent Comments Widget with Rounded Images for Blogger

                                                 

Today we are sharing a perfect working recent comments widget for blogger that could really help you in getting extra number of comments. I am talking about " How to Show Avatar Images On Blogger Comments ". I saw many posts showing images on their comments.But someone said that they are blogger profile images. But they were mistaken. Other commenting interfaces support images while commenting in blogger. But the simple blogger interface is the only one that is not showing images on blogger comments. Let us move on with the tutorial now.

Follow these very simple steps to add the "Recent Comments Widget with Rounded Images" in your blog.

• Step 1: Go To Blogger > Design > Page Elements
• Step 2: Click on "Add a Gadget"
• Step 3: Now choose HTML/JavaScript
•  

• Step 4: Copy and paste the following code below

Recent Comments Widget code

<style type="text/css">
ul.latest_recent_comments{
list-style:none;
margin:0;
padding:0;
} 
.latest_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
} 
.latest_recent_comments li .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;
} 
.latest_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
} 
.latest_recent_comments li span{
margin-top:4px;color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
.latest_recent_comments span{
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[    // Recent Comments Settings    var numComments  = 5, showAvatar  = true, avatarSize  = 60, roundAvatar = true, characters  = 30, showMorelink = true, moreLinktext = "More �", defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script>
<script type="text/javascript" src="http://yourjavascript.com/120631591214/CTRrecentcomments.js"></script>
<script type="text/javascript" src="http://www.crackstrick.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6"></script>

Settings:-

• Change numComments = 5 to your desired number.
• Replace http://www.crackstrick.blogspot.com with your blog Url.

3. Save the gadget and then Save the Layout.

That's It..... Now go to your blog and view the official recent comments widget showing recent comments with commentators image rounded. 
Happy Blogging :)