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 presented 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.

Blogger Comment Styling with CSS

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.

How to style threaded comments in blogger

4. Click and place your cursor inside the HTML editor and press CTRL+F (Mac users Command+F).

5. Search for ]]></b:skin> and …

Style threaded comments in blogger

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 the 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 …

Blogger threaded comments customization

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:

orange author badge blue author badge
dark gray author badge pink author badge
gray author badge orange author badge
red author badge sea green author badge
shadow author badge spark pink author badge

 

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.

15 thoughts on “How to Style Threaded Comments with CSS on Blogspot – Blogger Guide”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top