How to Decorate Blogger Comments

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, beautiful & completely customizable.

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

Find & Change the Default CSS Code for Comments


To do this quick makeover, just go to Layout 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: $commentheadingcolor;
}

#comments-block {
font-size:13px;
}
#comments-block .comment-author {
color: $commentauthorcolor;
font-size:12px;
background: $commentauthorbackcolor;
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: $commentauthorcolor;
border-bottom:solid 1px $authorborderbottom;
padding-bottom:2px;
text-decoration:none;
}

dd{margin:0; border:0; padding:0; padding:0 10px; background: $bodybackcolor; color: $bodytexcolor;}
dd.comment-body{border:solid 2px $bodysidesbordercolor; 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 $footerbordercolor; 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: $commentdatecolor;}
.comment-timestamp a:link, .comment-timestamp a:visited {
font-size:11px; color: $commentdatecolor; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;}


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


Save the template and see the comments. You'd notice that the comments are now looking really decent and stylish.

Add the Customization Code in CSS


We've changed the default styling for comments after adding the code in previous step but everyone has different taste so let's add some juicy code to the template's HTML. Now, scroll down a little and you'll find this piece of code:

/* Variable definitions
====================


Right after the above code, you need to add the following code:

<Variable name="commentheadingcolor" description="Comments Heading Color" type="color" default="#0B486B" value="#0B486B">
<Variable name="commentauthorcolor" description="Comment Author Color" type="color" default="#53524b" value="#53524b">
<Variable name="commentauthorbackcolor" description="Comment Author Background Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="authorborderbottom" description="Comment Top Border Color" type="color" default="#80a8ba" value="#80a8ba">
<Variable name="bodybackcolor" description="Comment Body Background Color" type="color" default="#f5f8fa" value="#f5f8fa">
<Variable name="bodytexcolor" description="Comment Text Color" type="color" default="#333" value="#333333">
<Variable name="bodysidesbordercolor" description="Comment Sides Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="footerbordercolor" description="Comment Bottom Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="commentdatecolor" description="Comment Date Color" type="color" default="#999999" value="#999999">


Now, the overall code should look something like this:

/* Variable definitions
====================
<Variable name="commentheadingcolor" description="Comments Heading Color" type="color" default="#0B486B" value="#0B486B">
<Variable name="commentauthorcolor" description="Comment Author Color" type="color" default="#53524b" value="#53524b">
<Variable name="commentauthorbackcolor" description="Comment Author Background Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="authorborderbottom" description="Comment Top Border Color" type="color" default="#80a8ba" value="#80a8ba">
<Variable name="bodybackcolor" description="Comment Body Background Color" type="color" default="#f5f8fa" value="#f5f8fa">
<Variable name="bodytexcolor" description="Comment Text Color" type="color" default="#333" value="#333333">
<Variable name="bodysidesbordercolor" description="Comment Sides Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="footerbordercolor" description="Comment Bottom Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="commentdatecolor" description="Comment Date Color" type="color" default="#999999" value="#999999">


Save your template. Now, you can go to the Fonts & Colors section and customize all the colors according to your taste.

25 comments:

  1. failed for me...zzz..z..z.z.z....

    ReplyDelete
  2. I just did what you say and it worked! It looks great! Thanks!!

    ReplyDelete
  3. @ Beben, this tutorial is easily implementable for people using default layouts, so I've also mentioned in the tutorial that if you're unable to implement it then please send me your blog address for help.

    ReplyDelete
  4. It worked even though I don't have a default layout.

    Thank you.

    If it's not too much to ask, what code can I use to change the look of the "Post A Comment" field? I want to change the color and make it bold. I am using a black page background so everything needs to stand out a bit more.

    ReplyDelete
  5. @ Carol, please gimme some time to write a tiny tutorial for that!

    ReplyDelete
  6. I do not have post comments in my template could you help me to add them

    ReplyDelete
  7. @ Vodolij & అప్పారావు శాస్త్రి, please send me your XML template layout by mail. Just go to the Edit HTML tab and click on Download Full Template link to download the layout and send it to me.

    ReplyDelete
  8. @ Tommy, I've just checked your blog and you've successfully applied this tut, so, what's the problem???

    ReplyDelete
  9. When I comment it shows a red name, and I like that, but when another blogger user comments, I dont want their name to be red? can I solve this?

    ReplyDelete
  10. @ Tommy, I saw some of the comments there and the names of other people are displayed in a dark color (close to black) as in these posts...

    http://www.tommy23456.com/2010/02/grand-opening-party-review.html
    http://www.tommy23456.com/2010/02/update-orange-puffle-spotted.html

    Just tell me which color you want to apply on names of other people and then send me your layout (Layout -> Edit HTML -> Download Full Template) through mail.

    ReplyDelete
  11. IS there a way to add an image to background instead of colour?

    ReplyDelete
  12. MIND ARE LIKE THIS :-


    /* 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;
    }




    BUT CANNOT WRITE A COMMENT.

    ReplyDelete
  13. @ ÎĦΣçҜәѓ™, yes that can be done! Do you want me to write a tutorial on that?

    ReplyDelete
  14. @ mremarts, please gimme your blog address!

    ReplyDelete
  15. @Bilal:
    If you want you can write a tutorial. It would help a lot of bloggers. hehe :D

    ReplyDelete
  16. @ ÎĦΣçҜәѓ™, sure I'll do that. By the way, you've replied so quickly to my comment, how is that so???

    ReplyDelete
  17. @Bilal :
    I was online at the moment by coincidence. thats all... hehe :D also comment subscribtion by email. :-)

    ReplyDelete
  18. My Comment Area is Like Below :-
    ===============================

    #comments {
    padding-left:20px;
    padding-right:18px;
    width:460px;
    }

    #comments h4 {
    font-size:13px;
    margin-top:10px;
    padding-top:20px;
    }

    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    padding-left:20px;
    }

    #comments-block .comment-author {
    margin:.5em 0;
    margin-top:25px;
    }

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

    But Comment Area Does not Show !!!

    What Can I Do now ?

    ReplyDelete
  19. @ Neon, I've just checked your blog and nothing seems wrong there!

    ReplyDelete
  20. you should add a demo page for us to see the end result?where I don't even know whats the code for @,@

    ReplyDelete
  21. @ 7ths, each Blogger template has different code so it's very difficult to cover all templates in one tutorial. However, you can send me your template file and get it customized.

    ReplyDelete

Note: All comments will be moderated.