RealcomBiz
Pin It

Customize Blogger Threaded Comment With Cool Style And Color

This is another great way of styling default blogger comments with cool colors, and also including a ribbon to the authors header in other to distinguish between the author comments and the visitors comments, this tutorial am sharing with you is from paul crowe, and it was design using simple CSS.



Apply Threaded Comment With Cool Color
  • Go to your blogger dashboard
  • Click on "Design" > "Template Designer"
  • Scroll down and click on "Advances" > "Add CSS"
  • Copy and paste the code below in the CSS box
     
#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:100%!important}

.comment-form{width:100%;max-width:100%}
  • Click "Apply to Blog" and view your blog to see the awesome changes
Customization
  • To change the of color of names and comments counter box, then replace #d80556 with your preferred hex color, check here for 100's of hex color.
  •  To change the background of the ribbon, simply edit,
http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png

Replace it with either of the two options

For Green Ribbon
http://3.bp.blogspot.com/-U-Dv6Xse-VI/UA7g-c_PbhI/AAAAAAAAAxQ/al6quGVQhG4/s1600/rb+green+ribbon.gif

For Blue Ribbon
http://4.bp.blogspot.com/-Tnrzp5Dosro/UA7iLbGBF8I/AAAAAAAAAxY/2tFl_egIi2U/s1600/rb+blue+ribbon.gif

That's all, hope your enjoy this articles? take few seconds to share it and subscribe for you to get our posts update directly into your email.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

19 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Durodola Ridwan...
    Thanks for sharing this tutorial...
    I's so usefull for me because it can make my blog so beautifull...
    once again...
    Thank you very much

    ReplyDelete
    Replies
    1. Thanks for the feedback and keep visiting for more...

      Delete
  2. wow cool ....
    see my blog www.3nura.blogspot.com

    ReplyDelete
    Replies
    1. I just check out your blog, great job...

      Delete
  3. This is what i will call blogging tweeks. Stuffs like this when added to a blog makes it more fun to read and visit other posts on the blog because it produces a beautiful effect. Continue the good work Duro.

    ReplyDelete
    Replies
    1. Thanks for the awesome comment, i really appreciate it.

      Delete
  4. Replies
    1. copy and paste the above code above/before ]]> if it doesn't work, it mean there is some bug in your template, try to apply this if you love it realcombiz.com/2012/07/add-css-speech-bubble-to-new-blogger.html

      Delete
    2. How to decrease its width?? the ribbon is not coming properly..

      Delete
  5. amazing,
    you are very kind to share this code,
    thanks very much,
    *best way to know world is blog walking :D

    ReplyDelete
  6. hi, im using this for my blog currently but i would like to change a few things:

    1. have avatar image of the commenter inside the box instead of outside
    2. have date align right
    3. have a background behind the reply and delete button

    Please let me know if these can be done, and how, thank you so much!

    ReplyDelete
  7. Thanks a lot for this nice style. I really like this style and it is working in my blog.

    ReplyDelete
  8. Very good gadget, but I have one question:
    What you need to add css code to change / distinguish different color background commentary, which belongs to the author of a blog?

    Thanks for the reply and sorry for language errors (translated Google translator).

    ReplyDelete
  9. Thanks a lot Dear... Thank you so much.. Please Check out my blog http://www.hotechtouch.blogspot.com

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger