Home » Blogger Tutorials, Tricks and Hacks » Blogger Comments Tricks » Customize Color And Style For Blogger Threaded Comments

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Customize Color And Style For Blogger Threaded Comments

Customize Color And Style For Blogger Threaded Comments

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

3,459 views

To those of you who are still using Blogger’s default design for the comment section, don’t you think that it’s about time for you to spruce it up a little? Today’s featured tutorial is from Paul Crowe, which will teach you how t customize your comment section by changing its color and also adding a ribbon to the blog author’s comment to make it distinguishable from the rest of the other comments.

The design is said to have been influenced by Pham Duys code and all it takes is a bit of CSS. The difference between Pham and Paul’s method is that Pham directly pastes the code into the template’s HTML, while Paul pastes it using Blogger’s ‘Add CSS’ option under the ‘Advanced’ settings, which is what we will be following here.

  1. Head over to your Blogger dashboard
  2. Under ‘Template’, click on ‘Customize
  3. Go to ‘Advanced’ and then scroll down to ‘Add CSS
  4. And then copy/paste the code provided below:
#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%}

5. Click ‘Apply to Blog’ then ‘View Blog’ to see the result.

The names should now have a pinkish color to it and the author’s comment should have a ribbon on the top-right corner of the box labeled ‘Author’ with the same color. If you wish to change the color, simply change d80556 to any of the following:

  • 1e05d8 (for blue)
  • 56d805 (for green)

And the background-image URL (highlight in red) for the ribbon accordingly to:

http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif

for blue, and

http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif

for green.

Hope you guys have fun with this trick. You all have a good day!

Liked It ? Please Share

Comments

17 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Syahrulzaman says:

    Thanks for the tutorial. now i apply this to my blog and it look awesome. Thanks again.

  2. Nawa says:

    I can not make the comment box like yours…plz help me..

  3. it looks better right now.Thanks buddy

  4. Marshiee Kai says:

    Omg!! This is so awesome!
    Thanks so much!
    Lovin’ ur blog!!

  5. aPetrov says:

    thanks for your nice information ..great blog.I have to change it to embedded just to get

    the threaded reply. Seems like there are lot of bugs still yet.my blog site is Big brother

  6. aPetrov says:

    ooo…. thanks for your nice information ..great blog.I have to change it to embedded just to get the threaded reply. Seems like there are lot of bugs still yet.my blog site is Free software

  7. aPetrov says:

    Keith Frias sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography. true download

  8. MaxDee says:

    PGI Workstation Complete is PGI’s flagship scientific and engineering workstation compiler bundle. It includes all features from both PGI Fortran Workstation and PGI C++ Workstation. PGI Fortran Workstation, The Portland Group’s native parallelizing/optimizing FORTRAN 77, Fortran 90/95 and HPF compilers for 64-bit x64 and 32-bit x86 processor-based Linux, Free software Apple Mac OS X and Microsoft Windows workstations, provide the features, quality, and reliability necessary for developing and maintaining advanced scientific and technical applications.

  9. Bension says:

    it looks better right now.Thanks buddy

  10. Sharon says:

    hi, i would like to shorten the width of the box that says add comment, which line do i edit? thanks!

  11. paolo says:

    Bell’articolo, ma concordo con chi dice… si spera sempre che alla fine vada tutto per il meglio!

  12. Rae says:

    yay! thanks for this! so helpful! 😀

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here