Customize Blogger Threaded/Nested Comments with CSS

Here is this tutorial you will learn how you can customize your blogger threaded ( nested ) Comments with CSS. As you can see the screenshot below to get idea actually, how it will be look like after adding a CSS style to your blogger blogspot. Also you can see a demo of this stylish, customized threaded comments here [Link]

To have this stylish threaded comments on your blog, all you will need to add a CSS code to your blogger template.

Related :
-- Enable YouTube Video Comments on Blogger
-- How to Add Smileys & Emoticons inside Blogger Comments
-- Add Stylish Most Commented Posts Widget to Blogger

Customize Simple Nested Comments with CSS

Go to blogger dashboard > Template > Edit HTML
Click anywhere inside the text area to enable search box,
Type </b:skin> on search box to search for it.

Just above the </b:skin> add below code.

.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

Changes :

- replace the #F9F9F9 value to change the background color of the comments;
- #555 to change the text comments color;
- #EEEEEE to change the color of the shadow around comments;
- 4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments;
- 1.190em to change the comments font size;
- to change the arrow color, replace the #EEEEEE value from color: #EEEEEE;
- to change the border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
- to change the avatars' size and roundedness, change the 60px value;

You can use this color code generator to pick your favorite color

Finally, Save Template and you're done !

Add Comment

Quicker BD

Customize Simple Nested Comments with CSS

Changes :