How to Decorate Comments in Blogger

By default, Blogger comments are very simple with a profile picture but I'll tell you a simple way to make your comments look stylish and beautiful.

Remember: Before proceeding, please backup your current template layout. (?)

To do this quick makeover, just go to Layout and then Edit HTML section. Find this code there:

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Tip: If you can't find this code then please comment here with your blog address otherwise continue with the tutorial.

Actually, this is the CSS code responsible for the appearance of your comments. So, you need to replace the above code with the following code:

/* Comments
----------------------------------------------- */

.comment-form {
margin-left:.5em;}

.comments {
margin-left:.5em;}

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #0B486B;
}

#comments-block {
font-size:13px; color:#333333;
}
#comments-block .comment-author {
color:#53524b;
font-size:12px;
background:#d7e8f0;
padding:4px;
font-weight:bold;
text-decoration:none;
}
#comments-block .comment-author a:link, .comment-author a:visited, .comment-author a:hover {
font-weight:bold;
color:#53524b;
border-bottom:solid 1px #80a8ba;
padding-bottom:2px;
text-decoration:none;
}

dd{margin:0; border:0; padding:0; padding:0 10px; background:#f5f8fa;}
dd.comment-body{border:solid 2px #d7e8f0; border-bottom:none; border-top:none;}
dd.comment-body p{border:0; padding:0; margin:0; padding:10px 0;}
dd.comment-footer{border:solid 2px #d7e8f0; border-top:none; margin-bottom:10px;}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

.comment-timestamp{font-size:11px; color:#333333;}
.comment-timestamp a:link, .comment-timestamp a:visited {
font-size:11px; color:#999999; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;}


.deleted-comment {
font-style:italic;
color:gray;
}

Save your template and you're done with the comments makeover. Please remember that you can always change the color (currently sky blue) to your own choice. The code for sky blue color is #d7e8f0 but you can replace it with some other color by simply replacing the code #d7e8f0.

If you're using a custom template then you might feel difficult to implement this tutorial but you can always ask for my help.