Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
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!".

29 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
  10. This comment has been removed by the author.

    ReplyDelete
  11. It's not working. Would you please help me to add this into my blogger website ? I hope you'll help me. Waiting for your quick response via email @ abid114141@gmail.com

    ReplyDelete
  12. adidas Originals continues to upgrade and add new materials across the adidas ZX Flux line. The latest drop is the adidas ZX Flux ADV Virtue Primeknit ’Navy’ which is now becoming available exclusively for women.This new edition of adidas nmd R1 the adidas ZX Flux comes with Blue across the uppers while constructed with Primeknit. As you can see, a new geometric stitched graphic was also used. The brand then added a yeezy shoes soft Pink around the collar and insole while White hits the adidas branding. Finishing the look is more White which runs through the midsole and outsole.Below you can check out more adidas nmd for sale photos of the adidas ZX Flux ADV Virtue Primeknit Navy which will give you a detailed look. At the time of writing, they are now landing at select adidas Originals retailers Adidas Ultra Boost Uncaged which includes Norte. Retail price is set at $120 and as of now, limited sizes are still available. Expect more retail stores to have them soon.
    adidas Originals will release a NMD Adidas women’s inspired Ultra Boost in the near future. Now we take a closer look at the adidas Ultra Boost Uncaged ‘Light Blue’ which may be of interest to you.Looking closer at Adidas Outlet this Uncaged edition of the adidas Ultra Boost features shades of Light Blue along with Soft Orange. While they are covered in Light Blue, the Primeknit features lighter shades to give adidas ultra boost the unique design. Following is Soft Orange which hits the laces for a clean look. Other details include Light Blue on the heel counter while White runs through the Boost midsole NMD Human Race Yellow and outsole.Below you can see more images of the adidas Ultra Boost Uncaged Light Blue which gives you a better look. Currently a release date has yet to be announced but Yeezy Boost 350 Turtle Dove make sure to check back with us for updates.
    Parley and adidas Originals will bring another adidas Ultra Boost out, hopefully this time around more obtainable. They will have two versions adidas stan smith of the Parley x adidas Ultra Boost for both Men and Women.As you can see, the two pairs of adidas Ultra Boost shown will have Blue hues throughout along with stripes Adidas Basketball Shoes which was designed to bring environmental awareness.

    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