Add Cool Unique Color Styles To Blogger Comments




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

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

52 comments:

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

    ReplyDelete
    Replies
    1. 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
    2. Thanks Louise I appreciate it !

      Delete
  2. Wonderful - but I cannot see the demo - page not found or something. I want to see it :)

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

      Delete
  3. Looks great, thanks buddy. You can even replace the comment CSS with the one above. :)

    ReplyDelete
  4. Hello Admin,

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

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

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

      Delete
  6. Thanks! I've been looking this for months! =D

    ReplyDelete
  7. Nice, Thank you so much for sharing....

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

    ReplyDelete
    Replies
    1. I will have the comments smileys in a future post..

      Delete
  9. Awesome design for thread commenting system,thanks Paul

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

    ReplyDelete
  11. Awesome ! .. i will use Blue one .. your blog's commenting system is awesome can you provide us like this one ? please ...

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

    ReplyDelete
  13. 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
  14. Hello, Sir ! Thank you for this useful tutorial. I've applied in my blog :)

    ReplyDelete
  15. 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
  16. Brilliant tutorial :D Thank you for posting this. For some reason though the little 'author' sash doesn't show up on mine which is a shame

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

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

    Thanks paul

    website,
    H4ck3r Cracks

    ReplyDelete
  19. Thanks Paul.
    It looks great on my blog

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

    ReplyDelete
  21. 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
  22. 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
  23. 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
  24. Thank you so much! Although I changed the colours a little to suit my blog better :)

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

    thx before

    ReplyDelete
  26. Great job Paul, thanks a lot.
    Cheers...

    ReplyDelete
  27. How to change colour and width of it ?

    ReplyDelete
  28. 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
  29. THis code is so important for any template comment customization...

    ReplyDelete
  30. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us