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

  4. Thanks Louise I appreciate it !

    Delete

  6. thank you

    Delete

  7.  

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

    ReplyDelete

     

    Replies

     

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

    Delete

  10.  

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

    ReplyDelete

  12. Hello Admin,

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

    ReplyDelete

     

    Replies

     

  13. 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

  14.  

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

    ReplyDelete

     

    Replies

     

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

    Delete

  17.  

  18. This is cute, Thank You

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    Nice post! heplful

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

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

    Delete

  24.  

  25. Awesome design for thread commenting system,thanks Paul

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

  28. Some things have to remain unique yahya 🙂

    Delete

  30. Hmmm yEah 😀

    Delete

  31.  

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

    ReplyDelete

  33. 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

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

    ReplyDelete

     

    Replies

     

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

    great

    Delete

  36.  

  37. 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

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

    ReplyDelete

  39. 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

  40. Usefull

    ReplyDelete

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

    ReplyDelete

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

    Thanks paul

    website,
    H4ck3r Cracks

    ReplyDelete

  43. Thanks Paul.
    It looks great on my blog

    ReplyDelete

  44. 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

  45. 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

  46. Thanhk to share !

    ReplyDelete

  47. Very NICE

    ReplyDelete

  48. 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

  49. 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

  50. thx 🙂

    ReplyDelete

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

    ReplyDelete

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

    thx before

    ReplyDelete

  53. you are just awesome 🙂

    ReplyDelete

  54. Thạch NguyễnDecember 11, 2012 at 12:16 PM

    Thank you !

    ReplyDelete

  55. Thank you very much Sir

    ReplyDelete

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

    ReplyDelete

  57. How to change colour and width of it ?

    ReplyDelete

  58. Fantastic!

    ReplyDelete

  59. 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

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

    THis code is so important for any template comment customization…

    ReplyDelete

  61. Great post! Thanks a lot (;

    ReplyDelete

  62. 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

Related Posts

How To Change The Comment Font Face And Color On Blogger

How to easily change the comments font face and font color on Blogger blogs with video tutorial.

8 Useful Tips To Encourage Your Readers To Comment More

In this post we have the 8 best tips to get more comments on your blog.

Disqus, Intense Debate And Livefyre – Use The Top Comment Systems On Blogger

In this post we look at the three main comments systems for Blogger blogs.Disqus, Livefyre and Intense Debate can all be used on your blog.