Add A Cool Agency To Blogger Threaded/Nested Comments
If yous postulate a fresh agency to the threaded comments of a measure Blogger template, here's a uncomplicated CSS that volition attention yous to apply a dissimilar background, brand your avatars rounded, add together a edge amongst rounded corners together with a triangle which is genuinely an HTML entity to larn that phonation communication bubble expect on your comments.
You tin encounter a demo here.
To convey this agency inward your comments, all yous postulate to create is to glue the below code within the CSS business office of the template, which is betwixt the <b:skin> together with </b:skin> tags.
Step 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upwardly the search box:
Step 3. Paste or type the next tag within the search box together with hitting Enter to discovery it
Step 5. Finally, click on the "Save template" button... together with you're done!
You tin encounter a demo here.
To convey this agency inward your comments, all yous postulate to create is to glue the below code within the CSS business office of the template, which is betwixt the <b:skin> together with </b:skin> tags.
Styling Simple Nested Comments amongst CSS
Step 1. From the Blogger Dashboard, become to "Template" together with press the "Edit HTML" buttonStep 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upwardly the search box:
Step 3. Paste or type the next tag within the search box together with hitting Enter to discovery it
]]></b:skin>Step 4. Just inward 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 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 some comments;
- 4px company #EEEEEE to modify the edge width (4px), agency (solid) together with color (#EEEEEE) some comments;
- 1.190em to modify the comments font size;
- to modify the arrow color, supplant the #EEEEEE value from color: #EEEEEE;
- to modify the edge width (7px), agency (solid) together with color (#EEEEEE) some avatars, modify this part: 7px company #EEEEEE;
- to modify the avatars size together with roundness, modify the 60px value;
Step 5. Finally, click on the "Save template" button... together with you're done!
