Add Cool Unique Color Styles To Blogger Comments

Posted : Thursday, June 07, 2012 | Post Author : Paul Crowe | 52 comments

The ability to reply to comments on Blogger was probably the most sought after feature from Blogger users from many years.This year when the Blogger team delivered with the new Threaded comments with replies the response was obviously very positive.However the new comment format has brought with it some problems as some previous changes you may have made to your comment section may have been lost and moreover future changes would need to be coded differently.So for those of you that may have lost some of the styles you added or if you just want to add some style to lets face it what is a fairly basic looking comment section in this post i have 3 different color coded styles you can easily add to your blogger comments.Also check out the Speech Bubble Style Threaded Comments For Blogger we published in April.

The three styles add color to the comment number, comment author name, add a comment text and best of all the author comments have a ribbon attached.So when you comment on your own blog a ribbon will be placed in the corner with the text “Author” so reader can easily see your comments.The three styles we have will add all these features including the author ribbon in either Blue, Pink or Green.

These styles have been influenced from the code on Duypham, check out the demo below (Scroll to comments) with the blue style added.

View Demo Button

I have a tutorial on how to add the code to your blog and of course the code for all three styles.

Three Styles For Blogger Threaded Comments


Step 1 – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2 – Copy And Paste The Code For Your Your Chosen Style Into The Css Section And Click Apply To Blog.

Blue Threaded Comment Style Screenshot :

Blue Threaded Comment Style Code :

Scroll Box Make Sure To Get All The Code

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Pink Threaded Comment Style Screenshot :

Pink Threaded Comment Style Code :

Scroll Box Make Sure To Get All The Code

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Green Threaded Comment Style Screenshot :

Green Threaded Comment Style Code :

Scroll Box Make Sure To Get All The Code

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

That’s it a cool new style for your Blog comments with author ribbon so readers know which comments are yours.Look out for more upcoming posts to Spice up your Blogger comments.

52 comments:

  1. Just what my blog needed a bit of comment spice! Thank you so much for sharing, Paul, Louise

    ReplyDelete

     

    Replies

     

  2. Just popping in to let you know, I’ve added your link to my blog post so other’s can pop over and join in on the color! Thanks again for sharing…

    Delete

  3. Thanks Louise I appreciate it !

    Delete

  4. thank you

    Delete

  5.  

  6. Wonderful – but I cannot see the demo – page not found or something. I want to see it 🙂

    ReplyDelete

     

    Replies

     

  7. Thanks for the heads up Prime I have updated the demo link so you can see it now.

    Delete

  8.  

  9. Looks great, thanks buddy. You can even replace the comment CSS with the one above. 🙂

    ReplyDelete

  10. Hello Admin,

    How do you create such images like you have created in the first image of this post.Pls relpy….

    ReplyDelete

     

    Replies

     

  11. That’s a stacked polariod effect check out this post for how to do it – How To Add Stacked Polaroid And Other Cool Effects To Images

    Delete

  12.  

  13. Paul, your demo is not working on this post. Please check it.

    ReplyDelete

     

    Replies

     

  14. Thanks for the heads up Sonia I have updated the demo link so you can see it now.

    Delete

  15.  

  16. This is cute, Thank You

    ReplyDelete

  17. Thanks! I’ve been looking this for months! =D

    ReplyDelete

  18. Nice, Thank you so much for sharing….

    ReplyDelete

  19. Neel Shah-Techwindow.orgJune 9, 2012 at 12:38 PM

    Nice post! heplful

    ReplyDelete

  20. that picture there are smileys and emoticons, can you do the tutorial or give link address to me?

    ReplyDelete

     

    Replies

     

  21. I will have the comments smileys in a future post..

    Delete

  22.  

  23. Awesome design for thread commenting system,thanks Paul

    ReplyDelete

  24. Hum, seems so nice, i´ll try later. ty

    ReplyDelete

  25. Awesome ! .. i will use Blue one .. your blog’s commenting system is awesome can you provide us like this one ? please …

    ReplyDelete

     

    Replies

     

  26. Some things have to remain unique yahya 🙂

    Delete

  27. Hmmm yEah 😀

    Delete

  28.  

  29. aah , thats what i nedded !
    paul , awesome work man !

    ReplyDelete

  30. When replying on a Blogger post using a WordPress username, you appear as a ‘no-reply’ poster. I mean that the Blogger host cannot click and reply to your post. Do you know the workaround for that??

    ReplyDelete

  31. Hello, Sir ! Thank you for this useful tutorial. I’ve applied in my blog 🙂

    ReplyDelete

     

    Replies

     

  32. Jackson NwachukwuJune 18, 2012 at 1:03 PM

    great

    Delete

  33.  

  34. Nice Post Paul, But Can I know how to highlight the author comment alone ? I don’t want to add any colors to comment, I just want to highlight the comment of the author

    ReplyDelete

  35. Oh my god, you are the best css.

    ReplyDelete

  36. Brilliant tutorial 😀 Thank you for posting this. For some reason though the little ‘author’ sash doesn’t show up on mine which is a shame

    ReplyDelete

  37. Usefull

    ReplyDelete

  38. Great post
    How to add reply button to second reply box (just like your commets)

    ReplyDelete

  39. i have done with it looking cute pink one is better with black background it looks dashing :p

    Thanks paul

    website,
    H4ck3r Cracks

    ReplyDelete

  40. Thanks Paul.
    It looks great on my blog

    ReplyDelete

  41. Robyn @ Robyn♥s NestSeptember 2, 2012 at 7:27 PM

    Love it!!! Thank you so much. My blog comments look so much more organized now and separate from my post. Robyn

    ReplyDelete

  42. Great tutorial I modified it to something more lovely on my blog. I edited the color and added a thicker border for the comment block. Well done man

    ReplyDelete

  43. Thanhk to share !

    ReplyDelete

  44. Very NICE

    ReplyDelete

  45. hello paul please reply in the demo you added the smilies can you please please tell me how to add them in my blog please ?

    ReplyDelete

  46. I have commented on this tutorial before but did not implement it then. After using Disqus 2012, and discovered some falls, I decided to use the blogger default comment system. Thanks to the beautiful and professional work done by Paul!

    After a little modification, I used the tutorial and is working perfectly on my blog.

    ReplyDelete

  47. thx 🙂

    ReplyDelete

  48. Thank you so much! Although I changed the colours a little to suit my blog better 🙂

    ReplyDelete

  49. the author label wont show up on my blog?
    is my templates was the matter?

    thx before

    ReplyDelete

  50. you are just awesome 🙂

    ReplyDelete

  51. Thank you !

    ReplyDelete

  52. Thank you very much Sir

    ReplyDelete

  53. Great job Paul, thanks a lot.
    Cheers…

    ReplyDelete

  54. How to change colour and width of it ?

    ReplyDelete

  55. Fantastic!

    ReplyDelete

  56. Amber *SaltTree*May 14, 2013 at 5:10 PM

    Thank you so much for this. I changed the colour of the text and redid the image sash to suite my blog. Soooo much better then the generic blogger comments. Thanks bunches!

    ReplyDelete

  57. Mohammad Hamza FroughSeptember 8, 2013 at 8:07 AM

    THis code is so important for any template comment customization…

    ReplyDelete

  58. Great post! Thanks a lot (;

    ReplyDelete

  59. Hi Paul, great tutorial but i have a little problem. After adding the codes, i noticed it’s over-riding the numbered pagination i added from one of your other tutorials. The numbers appears only on replies. Any idea on how to fix this? Woul appreciate your help. Thanks

    ReplyDelete