After implementing threaded comments in Google Blogger, now it’s time to style the comment areas to impress blog readers. The main comment and reply comment will be present in a smart manner. Admin/Author comments will have a badge to differentiate them from reader comments. This stylization will make your blog look more professional.
How do I use a stylish comment box for Blogger?
Hereunder is a preview of the new modern look of Blogger threaded comments.
Steps to Style Threaded Comments (New Blogger Interface)
1. Log in to Blogger Dashboard and Click on the Theme tab given in the left sidebar.
2. You see a caret down icon ∇ on the right side of the Customise button. Click on it.
3. In a drop-down menu, you see an Edit HTML option. Click on it to edit the Blogspot theme.
4. Click and place your cursor inside the HTML editor and press CTRL+F (Mac users Command+F).
5. Search for ]]></b:skin> and …
6. Paste the following CSS code just ABOVE here.
7. Now, Click on the “Floppy” icon to save the changes, and you are done.
Steps to Style Threaded Comments (Old Blogger Interface)
1. Go to Blogger Dashboard.
2. Click on the “Template” tab (Now It’s Theme tab).
3. Click on “Edit HTML” and then click inside the HTML editor and CTRL+F (Command+F)
4. Search for ]]></b:skin> and …
5. Paste the following CSS code. Just ABOVE it. As indicated in the screenshot above.
6. Now, “Save the template,” and you are done.
CSS Code for Stylish Comment Box in Blogger
/* Style Blogger threaded comments with CSS code by TechPrevue (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://1.bp.blogspot.com/-WXWGqnPtV2Y/YDPK9t4ZjyI/AAAAAAAAeoU/mH4MAsIg3EkIaa166fBBXcrl8xWcxznlQCLcBGAsYHQ/s0/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 the 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 the image, copy the image link, and change it in the given 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:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
If you don’t want to interact with your readers then you can disable comments on blog posts and pages, but it is not advisable.
I believe you’ll love this post. If you still have any queries, do not hesitate to ask questions via comments.
A nice stylish comment box for blogspot.
Thanks!
Work nicely, I love threaded comments.
Thanks Naffadzzein!
Great work, a nice stylish comment box for Blogger.
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!
Thanks for the info and posting.
That is a great page! Thanks
Nice post for blogspot threaded comment box.
Really very nice. I feel the change in my blog and I like it.