Add a Cool Style to Blogger Threaded/Nested Comments

If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments.

You can see a demo here.

To have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between the <b:skin> and </b:skin> tags.

Styling Simple Nested Comments with CSS

Step 1. From the Blogger Dashboard, go to "Template" and press the "Edit HTML" button


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:


Step 3. Paste or type the following tag inside the search box and hit Enter to find it
]]></b:skin>
Step 4. Just above ]]></b:skin> add this CSS:
.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

How to Change Blogger Threaded Comments Background, Border and Colors

  • replace the #F9F9F9 value to change the background color of the comments;
  • #555 to change the text comments color;
  • #EEEEEE to change the color of the shadow around comments;
  • 4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments;
  • 1.190em to change the comments font size;
  • to change the arrow color, replace the #EEEEEE value from color: #EEEEEE;
  • to change the border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
  • to change the avatars size and roundness, change the 60px value;
Here is a tool from that may help to pick your favorite color: Color Code Generator

Step 5. Finally, click on the "Save template" button... and you're done!

22 comments:

  1. Loved the demo :)
    I will have this on my blog 4 sure but one thing,
    Is it possible to have that dotted lines border for the replies?
    Like the one that appears in ur comment border tutorial...

    ReplyDelete
    Replies
    1. No, not that...
      I mean like in this comment section,you see a straight line for replies right?
      I meant like that...

      Delete
    2. Hi, Kaarunya,

      Add this CSS just above ]]></b:skin>

      .comments .comment-thread.inline-thread {
      border-left: 3px dotted #DDDDDD;
      }

      Thanks for visiting!

      Delete
    3. Hey :)
      Thanx a lot :) It worked perfectly :)
      I would like to move the replies a little to the right than the first one,plz can you tell me how to do that?
      Thanx to your another post I have numbered perfectly :) So, I tried moving the date near the name..for some it's very near the name and few it's a little far.
      can you tell how to sort that also?
      link to check, http://www.happyhideout.com/2014/01/chahun-main-ya-na-with-english.html
      I am happy to have visited :) You have so many nice posts :)

      Delete
  2. Thank you for the tutorial, this is a VERY interesting blog

    ReplyDelete
  3. Hi i am trying to customize my blog but every tutorial that has instructions to find isnt working for me??I use Ctrl+F to open search box and i past but therwe is 0 score...any tips?

    ReplyDelete
  4. hi, every tutoial that starts with find isnt working for me...i press Ctrl+F to open search box and paste it shows me 0....any tips???

    ReplyDelete
  5. Wow its a good creativity which help for making popular blog

    ReplyDelete
  6. why i cant use that ? or because my blog its nofollow ??

    ReplyDelete
  7. Giúp tôi làm một cái cm như vậy nhé!

    ReplyDelete
  8. Sorry but It didn't work for me!! any way I want to know if you could give me your Template please but without any copyright that would be nice. thank you

    ReplyDelete
  9. This was very helpful and it worked for me, but I have a problem.
    The avatar circle appears over the line that separates the "post" space and the background/wallpaper of my blog. I've tried changing the size of the circle and the border width. This does change the size of the circle, but it's still too left.
    I would love it if you could help me! Your blog has been incredibly helpful so far :D
    Thank you!

    ReplyDelete
    Replies
    1. Hi Anahi,

      Add this code just above ]]></b:skin>
      .comments .comments-content .comment-thread ol {
      margin-left: 40px;
      }

      Increase the 40px value if needed.
      I hope this will work for you. Thanks for visiting!

      Delete
    2. The avatar is not over the line anymore :)
      Thank you very much for your help. I'll keep on visiting your website!

      Delete
  10. Hi ! Thank you so much for this style ! It helps me a lot !
    Even for a french like me, your tutorial was really easy to understand !
    But please, do you know if there is a way to hide the replies of all the comments ? I just want to hide them, not to remove them :)
    Thank you !

    ReplyDelete
    Replies
    1. Hi Raphaëlle,

      Add this CSS just above ]]></b:skin>

      .comments .thread-chrome.thread-collapsed {display: block;}
      .comments .thread-chrome.thread-expanded {display: none;}

      With this code, replies should appear only when somebody clicks on the "Replies" link. To hide them totally, add this code instead:

      .comments .comments-content .comment-replies {display: none;}

      Hope it works. Thanks for visiting! ;)

      Delete
    2. Merci beaucoup ! It works perfectly on my blog ! :)

      Delete
  11. Thanks,this is useful for my blog.^-^

    ReplyDelete
  12. I applied your code and voila!!! it worked like a charm
    now can I color admin comments differently
    please help

    ReplyDelete
  13. This "enter your comment" box is not showing in my blog. what can I do .My blog is itoocaninvest.blogspot.in
    it only shows 1 comment. if I click on that then only it shows the comment box

    ReplyDelete
  14. How can we change the font? I want to use a blogger font which is "cardo"
    Thanks!

    ReplyDelete