like WordPress Commenting System for Bloggers

No doubt, Blogger is the one of the most popular Blogging platform and best choice for newbies... 
It has a lots of attractive feature, But when it comes to the Commenting System, It totally sucks!!

Blogger’s Default Commenting System, Looks like out-dated, very classic and is not at all attractive. 
Commenting is one of the most integral parts of blogging: it’s what makes blogging a conversation, not a monologue. Many readers hesitate or don’t like to leave their comments if it looks like shit!

That’s why a good attractive commenting system will increase the amount of comments on your blog. 

In this article I’ll be teaching you how to decorate your default commenting form like WordPress comments. 
Note: This is not a specific guide, because each template has a different design and style.

Please Backup your template before proceeding.

First-of-all, remove all the CSS framework of the old commenting system in the template.  
    They are usually of the form:

#comments-block {...} 
.comment-body {...} 
.comment-footer {...} 
......

Now Search for </ b: skin> and insert the below CSS above it.

.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none} 
.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px} 
.comments-block .arrow{float:left;margin:22px 0 0 6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_db8JnSYhOyS86zlLQbIb0kLrQNNSrjlw8CfePkNGjfcRi2xVz7s2hGl6JwsZt7pbKCCeKnM1yRocWFV6O4SLMb2PSbytJJOLSekb3YBDfSfXicvwmQ8Z6ko5_BzzLgCEauY4JF7613c/) no-repeat} 
#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px} 
.comments-avatar{float:left} 
.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3} 
.comments-meta{font-size:18px} 
.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none} 
.comments-timestamp{color:#0E6284;font-size:12px} 
.comments-body{font-size:13px;padding:5px;background:#fff} 
a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right} 
.avatar-image-container{width:60px;height:60px;padding:2px;border:1px solid #ccc} 
.avatar-image-container img{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhq780xVYUcBX_vIiSzVPeyhfxUpFLxbRZaS2KuG7fewQ1ehlrP7JZ6d31Gdm5_VavPgvYOlclPksbyC3gnGDq7oxJY0orIJqNvdxtlWV_kySRy3nNtX87vJoGK4n-8dtk3WgACZqRTxc/) no-repeat;width:60px;height:60px}

Save your template and click on Expand widget templates, and navigate to the following:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'> 
<b:loop values='data:post.comments' var='comment'> 
........... 
</b:loop> 
</dl>

This code is quite long and may vary slightly on each template, replace all of the above with:

<div class='clear'/> 
<div class='comments-block'> 
<b:loop values='data:post.comments' var='comment'> 
<div class='comments-avatar'> 
<b:if cond='data:comment.favicon'> 
<img expr:src='data:comment.favicon'/> 
</b:if> 
<a expr:name='data:comment.anchorName'/> 
<b:if cond='data:blog.enabledCommentProfileImages'> 
<data:comment.authorAvatarImage/> 
</b:if> 
</div> 
<div class='arrow'/> 
<div id='comments-box'> 
<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXX&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Kogin3oxVO_g_1Ix0xhh74Iq6UA7mi-rLRx7r2NddiEvx08I40oanoMmcEqcISvj3rOUEXK1nykuS40odYflEkBAPmSqEttRVXuBrEaTJicv1foj-rahLUITgc72qc1h56QoqXm5T_w/'/></a> 
<div class='comments-meta'> 
<b:if cond='data:comment.authorUrl'> 
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 
<b:else/><data:comment.author/> 
</b:if><data:commentPostedByMsg/> 
<div class='comments-timestamp'> 
<data:comment.timestamp/> 
<b:include data='comment' name='commentDeleteIcon'/> 
</div></div> 
<div class='comments-body'> 
<b:if cond='data:comment.isDeleted'> 
<span class='deleted-comment'><data:comment.body/></span> 
<b:else/> 
<p><data:comment.body/></p> 
</b:if></div> 
</div> 
<div class='clear'/> 
</b:loop> 
</div>

Change XXXXXXXXXXXXXXXX to your Blog ID to activate the Reply button.

Save your template and see the results. Hope this comment frames has somewhat satisfied your needs. 

Posted in: Blogger,Blogging tips,commenting,Hacking,wordpress