Add A Cool Mode To Blogger Threaded/Nested Comments – Helplogger

If you lot remove a fresh mode to the threaded comments of a criterion Blogger template , here’s a uncomplicated CSS that volition attention you lot to apply a dissimilar background , brand your avatars rounded , add together a edge amongst rounded corners together with a triangle which is truly an HTML entity to instruct that speech communication bubble await on your comments.

You tin come across a demo here.

To convey this mode inwards your comments , all you lot remove to produce is to glue the below code within the CSS utilization of the template , which is betwixt the together with tags.

Styling Simple Nested Comments amongst CSS

Step 1. From the Blogger Dashboard , instruct to “Template” together with press the “Edit HTML” button

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

Step 3. Paste or type the next tag within the search box together with hitting Enter to notice it

]]>

Step 4. Just to a higher identify ]]> 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 together with 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 around comments;
• 4px corporation #EEEEEE to modify the edge width (4px) , mode (solid) together with color (#EEEEEE) around 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) , mode (solid) together with color (#EEEEEE) around avatars , modify this part: 7px corporation #EEEEEE;
• to modify the avatars size together with roundness , modify the 60px value;

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

Step 5. Finally , click on the “Save template” button… together with you’re done!