Custom CSS Style For Blogger Comments

Today’s featured tutorial comes from Valsaraj R of netoopsblog.blogspot.com, and through it, he’ll be showing us another way to spruce up our Blogger blog’s comment section. This is especially great for those of you who are starting to grow tired of the same comment section design.
His custom CSS-style is so easy on the eyes. It uses a bit more spacing than usual so it doesn’t look cramped. Also, the avatar is enlarged a bit to the reader can get a better look at the commenter’s (your) face.
Anyway, let’s see how it’s done.

• In your Blogger dashboard, go to the Template section.

• Click on Edit HTML and then Proceed.

• Using Ctrl+F, look for ]]></b:skin> in your template’s code.

• Copy the code below and paste it just before ]]></b:skin>

.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;
}

• Save your template and there you have it, you’re done!

By the way, there are two versions for this but we’ll only going to feature one of them here. If you’d like to see the other you can visit Valsaraj’s web page as mentioned earlier.