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.
nice
Thanks!
Work nicely
Thanks Naffadzzein!
??????/
It would be awesome if you provided Admin Badges too….
Thank you very much, its great! :)
So cool Great
Thanks very much
Good job. I like your work.
very well.
Great. I have applied this to my blogger. Thanks ad
Thanks for the info and posting.
That is a great page! Thanks
Nice post
Really very nice. I feel the change in my blog and I like it.