Threaded Comments Stylization with CSS Code – Blogger/Blogspot

14

After implementing threaded comments (system) in Blogger. Now it’s time to stylize comment areas to impress your blog readers. The main comment and reply comment will be present in a smart manner. Admin/Author comments will have a badge to differentiate admin/author and reader comments. This stylization will make your blog look more professional. Hereunder is a preview of the new modern look of Blogger threaded comments (system). This stylization is adapted from ‘Sora Templates‘ work.

Blogger Comment Styling with CSS

Steps to make threaded comments (system) more professional and stylish?

1. Go to Blogger “Dashboard”
2. Switch to “Template” tab
3. Click on “Edit HTML” and then …
4. Search for ]]></b:skin> and …

Blogger threaded comments customization

5. Paste following code just ABOVE it

Blogger threaded comments (system) stylization with CSS code:

/* Blogger threaded comments (system) stylization with CSS code
by Tech Prevue (https://www.techprevue.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:#eb1e1e}
#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 #eb1e1e;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:#eb1e1e}
.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://www.techprevue.com/wp-content/uploads/2013/07/red-author.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%}

6. Now “Save template”, and you are done.

Important:

1. To change the color scheme, you have to change Hex code #eb1e1e respectively you can choose one of the following author badges. To use any of the following author badges, you need to do right click on image and copy image link and change in CSS code (Shown in red color).

2. To make the avatar image circular, you have to add the following line in the above code –

.comments .avatar-image-container{border-radius: 50%;}

Author Badges:

author author author author author author author author author author

I believe you’ll love this post. If you still have any query, do not hesitate to ask questions via comments.

14 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.