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 HTMLClick 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 !