Customize Comment Style in Blogger |Edit Comment Style

On Blogger, Comment style Or Comment Form is not awesome and look disgusting. To enhance we have written this article.This will help you to customize Comment-Style Using CSS. If you are knowing CSS than you can Customize it. To customize your blogger Comment box like Allin1-Web Follow following steps

Preview Of Comment Style

• Go to Blogger.
• Click on Template and then on EDIT TEMPLATE.
• and add Following CSS.

CSS:

.comments .avatar-image-container, .comments .avatar-image-container img {
width: 48px;
max-width: 40px;
height: 40px;
max-height: 48px;
background: #FFF;
float: left;
border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 10px 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #ddd;
}
/*Auto Numbering Start*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content
{
margin:0px 0px 8px 28px!important;
}
/*Auto-Numbering End*/

.comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {

width: 36px;
max-width: 36px;
height: 36px;
max-height: 36px;
margin-left: 5px;
}
#comments {
background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}
.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}
.comments .comment-thread.inline-thread {
padding-left: 0px;
}
.comments .comment-thread.inline-thread .comment {
width:auto;
}
.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}
.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}
.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}
#comment-editor {
width:98%!important;
}
.comment-form {
width:100%;
max-width:100%;
}
#comments h4 {
display:inline;
line-height:40px;
padding:10px;
}
.comments .continue a {
background:#0d86cc;
text-align:center;
padding:10px 0;
display:none;
}
#comments h4,.comments .continue a {
line-height: 30px;
margin: 0;
padding: 20px 0 14px 10px;
font-size: 18px!important;
text-transform: uppercase;
font-weight: 400!important;
color: #444;
}
.comments .user a {
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
padding-left: 15px;
}
.comments .comments-content .datetime {
cursor: pointer;
float: right;
padding-top: 6px;
padding-right: 20px;
}
.icon.user {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxL9dU265HEVYHa9HN5Zhd2fDtgHbUls2Qc3QAZS2vifmlcNh9hWeU1ASaMcb8YULC40hgTWol8qN7R5xmcukzv-VMxmzmwVcZXejm9d9CPjpFCg86C78O2yJxfNMiXgPjju2RWb3r47_H/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comment-thread.inline-thread .user a {
font-size:13px;
margin: 0px;
padding: 0px;
}
.comment-actions {
background: #f2f2f2;
padding: 8px;
margin-left: 435px;
border: 1px solid #ddd;
float: right;
margin-top: -30px;
margin-right: 5px;
}
.comment-thread a {
color: #777;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7saWKL5ZlOi5XCGXJ1x3ZMX3xH3FzSd47FM9h_HMW-aCrS-4OQCrH36dPoX4tOS9fpBUYJ8ll9M5nRVX1PFZVFrKtLtXNEEyNBzPx7fQtrOXUNL6yz5ffu13lcDrDYlikocmZ8z3bJbAX/s1600/Verificon.png);
}

Related Article:

• How To Highlight Author Using Ribbon in Blogger
• Rename "Labels" with Your Own Text Text in Blogger
• Display Your Blog Link Below Every Post For Visitor To Share It 

STYLE 2

For STYLE-2 Use Following CSS

.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 3px 9px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;}

.comments .comment-block {
background: none repeat scroll 0 0 #E2E2E2;
border: 4px solid #ABABAB;
border-radius: 3px 3px 3px 3px;
padding: 3px 10px;}

.continue a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 3px 8px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;}

.comment-block:hover > .comment-header {
border-bottom: 2px solid #000;
-moz-transition: border-color .5s ease;}

.comment-header a {
color: #000000 !important;}

#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;}

.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}

Click On Save. You are Done.....See Preview and Enjoy

Please Leave Your Comment...