How to Customize Blogger Comments By Adding a Background Color and Border

The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat.

To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment.

- Add a Separator To Blogger Comments
- Add a Divider Below Comments in Blogger
- Fully Customize Your Blogger Comments By Changing The Background Color and Border

The first method is the easiest: we'll separate our comments by adding a border below each of them.

How to Add a Separator/Border To Blogger Comments


customize comments, blogger

Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin>
Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:
]]></b:skin>

Step 3. Paste the following style just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000;
}

- If we are using previous commenting system (with no reply option)
#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

Instead of a simple border, we can also add a divider/image between our comments.

How to Add a Divider (Image) Between Each Comment in Blogger


blogger comments, blogger tricks, blogger tutorials

Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:
]]></b:skin>
Screenshot:


Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):
.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpm1FWhNog2ni8st17opaIEXtQ96ugOdsuB_8PjjFgf0GWWqwEne0VBXsKau71NSrIAxs5b6yMiJljC_2E4SWdmw9B1qudJ4X1R059A4j5-qHSNkLx8ebA5k2SGiKbmJnvEfoIl3tkmKDG/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}

- If we are using previous commenting system (with no reply function)
#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpm1FWhNog2ni8st17opaIEXtQ96ugOdsuB_8PjjFgf0GWWqwEne0VBXsKau71NSrIAxs5b6yMiJljC_2E4SWdmw9B1qudJ4X1R059A4j5-qHSNkLx8ebA5k2SGiKbmJnvEfoIl3tkmKDG/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)

Step 3. Save the Template.

But you can still have more styles for each comment, for example adding a background color and a border.

How to Add A Border and A Background Color To Blogger Comments


blogger tips, blogger tricks, gadgets
Step 1. Go to Template > Edit HTML and search for the following piece of code:
]]></b:skin>

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):
.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color in Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}
Step 3. Save the Template.

- If we are using previous commenting system (with no reply function):

Step 1. Search for this line in your template:
<b:loop values='data:post.comments' var='comment'>
Step 2. Then, add the following code just below of it:
<div class='comments-new'>
Step 3. Look a little further down and you'll see the </b:loop> code and just above it, add this:
</div>
Step 4. Now find this:
]]></b:skin>
Step 5. And just above of it, add this CSS code:
.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}
(The rounded edges will not work in Internet Explorer with CSS)

In either case, you can change the background color, border, etc.. in parts with annotations in green.

Step 6. Save the Template.

If you need more help, leave a comment below.

45 comments:

  1. i have been looking for a good tutorial on this, and yours worked great! thank you for sharing!

    ReplyDelete
    Replies
    1. You're welcome, Audrey. Thanks for stopping by :)

      Delete
  2. Wao great detailed and very informative straight forward tutorial, bro you got good writting skills, keep up the good work. Free GAMES & SOFTWARES

    ReplyDelete
  3. Thank you so much for this tutorial!

    ReplyDelete
  4. Just a quick question, how do I increase the distance between the comment author and the border? It's even about the other sides but not at the top. My blog is: http://portiahunt.blogspot.co.uk

    ReplyDelete
    Replies
    1. Add below .comments .comments-content .user a{ this line:

      padding-top: 10px;

      You can increase/decrease the distance by changing the 10px value.
      I hope this will help. Thanks for visiting :)

      Delete
  5. I tried to add a Divider (Image) Between Each Comment in my blog and doesn't work. Please help me!
    My blog is: http://flory4all.blogspot.ro

    ReplyDelete
    Replies
    1. Hi Flory,
      Please send me a copy of your template at helplogger76@gmail.com
      Thank you.

      Delete
  6. I sent a copy of my template to you.
    Thank you!

    ReplyDelete
    Replies
    1. Sorry but I didn't receive your mail. Maybe try sending it again?

      helplogger76@gmail.com

      Delete
    2. I sent my mail again. Thank you.

      Delete
  7. its great information..thnaks for sharing

    ReplyDelete
  8. This was awesome!
    How do I change the background color behind the comment boxes themselves? I used your template and it put the comments into lovely separate boxes, but the color behind the boxes is gray.

    ReplyDelete
    Replies
    1. Hi Stephanie,

      Please search for this piece of code in your template:
      #comments {

      ..and just below you should see this line:
      background: #cccccc none repeat scroll top center;

      Replace #cccccc with transparent and see if it still appears.

      Delete
  9. How can I get the date under someones name? And how do I get that in uppercase letters?

    ReplyDelete
  10. Hi,

    can u please help in getting "Comment as:" removed and make a simple comments session.

    can u please respond to anishasblog@gmail.com

    ReplyDelete
  11. Thank you very much. I have modified and used this and few other scripts from this blog.

    http://pravab.blogspot.com/

    ReplyDelete
  12. Design is always nice comments, thank you very much!

    ReplyDelete
  13. hi, what's the code we need to put before for the flower boarder ???

    ReplyDelete
  14. Thanks for this. I can't seem to get my comment box to not be white, I've tried a handful of different versions. I've successfully added other codes like the box around the admin comments, but for some reason the comment box will not change. It looks terrible, please help.

    www.deutschevegan.blogspot.com

    ReplyDelete
  15. Thank You sooo much!! You are such an life saver!! I looked everywhere and this was the best tutorial!!

    Justsoapril.blogspot.com

    ReplyDelete
  16. Great... how to remove the reply button that appears under author reply. thanks in advance

    ReplyDelete
    Replies
    1. Add this code just above ]]></b:skin>

      .comments .comment .comment-actions a,.comments .comment .continue a{
      display: none;
      }

      Thanks for stopping by!

      Delete
  17. It worked nice in FF, but the avatars got messed in Chrome, why and how to fix it?
    http://juegosparaescapar.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Edgar,

      Please add this above ]]></b:skin>
      .comments .avatar-image-container {
      overflow: visible;
      }

      Sorry for the inconvenience. I tested it on Firefox and I didn't noticed this issue before.
      Hope it works now...

      Delete
  18. wow thanks,it worked...you are a star

    Pls help me,for some reason comments font size changed to smaller size,i have tried to change my codes invain...have a look here and advise accordingly

    http://clicksomemore.blogspot.com/2013/12/good-morning-folks.html?showComment=1388259189683#c4679643691472638963

    ReplyDelete
  19. just comment below the link I sent you and i will work on it.Thanks

    ReplyDelete
  20. Hello Admin,
    Thank you for your great work! Can you please help me? I tried to change the borders and the background of the replies, but it doesn't work. It shows this notice
    Invalid variable declaration in page skin: Variable is used but not defined. Input: widget.alternate.text.color
    Did I do something wrong?

    ReplyDelete
    Replies
    1. Hi Tektones,

      It seems that your template doesn't have a variable with the "widget.alternate.text.color" name, so you need to search this line in your template and remove it:
      $(widget.alternate.text.color)
      Then try to add the code again and see if you still get that error.

      Hope this works. Thanks for visiting!

      Delete
  21. Hello again Admin,
    Thank you very much for your reply. Unfortunatelly I could not find the line of the code. It seems that it does not exist! I use a template from blogger itself. Really strange!

    ReplyDelete
  22. Hi buddy, how are you...its been awhile, well I need a favor again [ you know you're my rescuer... wink], I have tried to change the font for comments invain, I want to it be Arial and not the current one.If you can hook me up with procedure or codes will be awesome? kindly reply on my post so it will be easy to see it

    http://clicksomemore.blogspot.com/2014/01/dar-es-salaam-listed-among-top-10-most.html#comment-form

    ReplyDelete
    Replies
    1. Add this just above ]]></b:skin>

      .comments .comments-content .comment-content {font-family: Arial, sans-serif;}

      Delete
  23. Hey, thanq 4 de post :)
    If I try increasing the avatar size more that 40px the image goes under the comment box.
    i.e the comment box lays on top of some of the avatar...
    Is there a solution for that?
    thanq

    ReplyDelete
    Replies
    1. Add this CSS just above ]]></b:skin>

      .comments .comment-block {
      margin-left: 80px;
      }

      And change the margin-left value (80px)

      Delete
    2. Hey thanq :)
      It worked perfectly, I had the problem with the rounded user image, now it's perfect :)

      Delete
  24. Hello!

    Great autorail... It works fine except for one little détail. When someone (anonymus) replies to one of my reply, their name and date does not have the same spacing as the author. It is to close to the edge of the border. Any suggestion???

    Thanks in advance

    ReplyDelete
  25. i added those codes as u said for border and background colour but its not being displayed
    check my site www.alltricktech.blogspot.com

    ReplyDelete
  26. Thank you so much! My comments' section has been a nightmare for way, way too long. This helped a bunch.

    ReplyDelete
  27. Thank you very much. This helped me, it needs to be shared to the world. More grace to your elbow.

    ReplyDelete
  28. Please, if this helps you remember to use the share button.

    ReplyDelete
  29. I need a star rating in the comments section on a particular page... Can you help?

    ReplyDelete
  30. Thanks Bro for this nice post....
    i need help in increasing the width of my blog sidebar....
    if you can help me with the same.

    ReplyDelete
  31. Hi, My wife sent me this link as she is a blogger and I have just recently started to blog. We are looking at improving our blogs and came across this. This does work but it does not look anything like the picture you posted. My blog addy is http://diyhobbyist.blogspot.com/2014/10/this-post-goes-along-with-my-clamps-and.html

    ReplyDelete
    Replies
    1. Hi Harold,

      The reason why it doesn't change anything is because you're using Google+ comment system and this works only for Blogger comments. You can disable the google+ comments by accessing the Google+ tab and unchecking the "Use Google+ comments on this blog" option. See this tutorial for more info.

      Delete