Add A Cool Manner To Blogger Threaded/Nested Comments

If you lot involve a fresh agency to the threaded comments of a touchstone Blogger template, here's a uncomplicated CSS that volition aid you lot to apply a unlike background, brand your avatars rounded, add together a edge amongst rounded corners in addition to a triangle which is genuinely an HTML entity to instruct that spoken communication bubble await on your comments.

You tin halt run across a demo here.

To convey this agency inwards your comments, all you lot involve to produce is to glue the below code within the CSS business office of the template, which is betwixt the <b:skin> in addition to </b:skin> tags.

Styling Simple Nested Comments amongst CSS

Step 1. From the Blogger Dashboard, become to "Template" in addition to press the "Edit HTML" button

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwards the search box:

Step 3. Paste or type the next tag within the search box in addition to hitting Enter to honor it

]]></b:skin>

Step 4. Just higher upwards ]]></b:skin> add together this CSS:

.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 corporation #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 corporation #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 corporation 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;
}

How to Change Blogger Threaded Comments Background, Border in addition to Colors

• replace the #F9F9F9 value to alter the background color of the comments;
• #555 to alter the text comments color;
• #EEEEEE to alter the color of the shadow some comments;
• 4px corporation #EEEEEE to alter the edge width (4px), agency (solid) in addition to color (#EEEEEE) some comments;
• 1.190em to alter the comments font size;
• to alter the arrow color, supersede the #EEEEEE value from color: #EEEEEE;
• to alter the edge width (7px), agency (solid) in addition to color (#EEEEEE) some avatars, modify this part: 7px corporation #EEEEEE;
• to alter the avatars size in addition to roundness, alter the 60px value;

Here is a tool from that may aid to selection your favorite color: Color Code Generator

Step 5. Finally, click on the "Save template" button... in addition to you're done!