Add a Cool Style to Blogger Threaded/Nested Comments

If you need a new threaded comment style for Blogger's default template, here's some simple CSS to help you apply a different background, round your avatar, and add rounded corners and triangle frames, which are actually HTML objects. Watch your comments to get speech bubbles.

You can watch the performance here .

To get this style in your comments, just add the following code to the CSS section of the template. and: Label.

Create simple inline comments with CSS

Step 1: On your blog dashboard , go to Form and click Edit HTML.

Step 2: Click anywhere in the code area and press CTRL + F to open the search field.

Step 3: Paste or type the following tag in the search box and press Enter to find it

]]>:

Step 4: Top Right ]]>: Add this CSS:

.comments block {
Background: #F9F9F9 ;
Color: #555 ;
box-shadow: 0 4px 10px #EEEEEE ;
position: relative;
margin-top: 10px;
margin left: 60px;
Padding: 10px;
Border: solid 4px #EEEEEE ! Important;
border-radius: 10px;
Font: 1.190em/ 1.2 Cambria, Georgia, sans serif;
}
.comment-thread li .comment-block before {
Location: Absolutely:
screen: blocking;
left -26px;
Color: #EEEEEE ;
Content: "\25C4";
Font size: 30px;
}
.avatar image container. {
Width: 60px ;
Height: 60px ;
max-height: 60px ;
Margins: 0px 0px 0 -28px;
Padding: 0px;
border: 7 px solid #EEEEEE ;
border-radius: 60px ;
}
.comments .avatar-image-container img {
hide excess;
Width: 60px ;
Height: 60px ;
max width: 60px ;
Restrictions: 0! Important;
border-radius: 60px ;
}
.comments-thread.inline-thread {
Background: none;
}
.Observations. Consequences {
border-top: 0 px translucent transparent;
}
.comments-content .datetime {
swimming: correct;
Font size: 11px;
}
.comments-content .user a {
Font size: 15px;
Color: #498EC9;
}
.comments-content .datetime a:pass {
Color: #777;
text formatting: none;
}
.comments-content .comment: first-child {
padding top 0px;
}
.comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.Observations. Consequences {
Padding: 0px;
}
.comments-content .icon.blog-author {
background image: none;
}

How to change background, border and comment color in a blog theme

• Change the value to #F9F9F9 to change the background color of the comment;
• #555 to change the color of the comment text;
• #EEEEEE to change the color of the shadow around the comment;
• 4px solid #EEEEEE to change the width (4px), style ( solid ) and color ( #EEEEEE ) of the border around the comment;
• 1.190em to change the font size of the comment;
• To change the color of the arrow, change the color #EEEEEE value to #EEEEEE;
• To change the width ( 7 px ) , style ( solid ) and color ( #EEEEEE ) of the border around the avatar, adjust the following parts: 7px solid #EEEEEE;
• Change the value to 60px to change the size and rotation of the avatar .

A tool that can help you choose your favorite color is the Color Code Generator

Step 5: Finally click "Save Template"... and that's it!