How to Style Threaded Comments with CSS on Blogspot – Blogger Guide

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.