Threaded Comments Stylization with CSS Code – Blogger/Blogspot

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.

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 …

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:

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