Add A Cool Agency To Blogger Threaded/Nested Comments

If you lot require a fresh fashion to the threaded comments of a touchstone Blogger template, here's a elementary CSS that volition aid you lot to apply a unlike background, brand your avatars rounded, add together a edge alongside rounded corners in addition to a triangle which is truly an HTML entity to teach that spoken language bubble await on your comments.

You tin run across a demo here.

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

Styling Simple Nested Comments alongside CSS

Step 1. From the Blogger Dashboard, teach 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 upward the search box:

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

]]></b:skin>

Step 4. Just inwards a higher house ]]></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 company #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 company #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 company 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 modify the background color of the comments;
#555 to modify the text comments color;
#EEEEEE to modify the color of the shadow roughly comments;
4px company #EEEEEE to modify the edge width (4px), fashion (solid) in addition to color (#EEEEEE) roughly comments;
1.190em to modify the comments font size;
to modify the arrow color, supersede the #EEEEEE value from color: #EEEEEE;
to modify the edge width (7px), fashion (solid) in addition to color (#EEEEEE) roughly avatars, modify this part: 7px company #EEEEEE;
to modify the avatars size in addition to roundness, modify 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!