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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgislkxg914gISc18xCkW-5ApzpawQHtpFZuzbhgyiAnUcSWMhFDF7Q_QzqvZ6XGRCD5KdRkIaNELjJFPT2ipRYL0PSbLJFwpQ0GaXNXji8TFV16gT55V0EC-22kzm2bDk5tPXIY6fHFjM/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,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgislkxg914gISc18xCkW-5ApzpawQHtpFZuzbhgyiAnUcSWMhFDF7Q_QzqvZ6XGRCD5KdRkIaNELjJFPT2ipRYL0PSbLJFwpQ0GaXNXji8TFV16gT55V0EC-22kzm2bDk5tPXIY6fHFjM/s320/author-pink.png

Replace it with either of the two options

For Green Ribbon

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8YbN8oqBnflFF_fkiISBZx-BlZzYnwtjnU0sRBT5m0ILeU6VHG1dchDXh7uT1nEK8TgGTvwwTFRbdeGNOZLBhZ3NCFj9v0K2lDYggzeEUvg7UQmN8p1Xgf6eJB0hBSsk0acIy31ta60H/s1600/rb+green+ribbon.gif

For Blue Ribbon

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSole52Ksj0K8qB8wMAPWfA3DHIln6EcNo8ZOzU6US42_ZbBx_d5FlADAYyODqpkI1xjFOCbpWtXEqvw9icK8a4c6mcNfKqIs2xWH_6iJnZvqEpY8HiqoqazI16Ene1ViYQLCrGbT3SFBB/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!".

Follow @realcombiz