Breaking News:

latest

Add a Cool Style to Blogger Threaded/Nested Comments

Hello and Welcome to Getwebinfo. Here on this post i will tell you that how can you add a cool style of comments in to you blogger template....

Hello and Welcome to Getwebinfo. Here on this post i will tell you that how can you add a cool style of comments in to you blogger template. It's very simple and easy steps to do that. If you need a fresh style to the threaded comments of a standard blogger template, here's a simple CSS that will help you to apply a different background make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments.




If You want to See the demo of Comment system before install it to your blogger template so please click here

To have this style in you comments all you need to do is to paste the below code inside the CSS part of the template, which is between the <b:skin> and </b:skin> tags.


Style Simple Nested Comments with CSS for Your Blogger

Step 1: From the Blogger Dashboard go to Template and Press the Edit HTML Button

Step 2: Click any where inside blogger theme code are and press the CTRL + F keys to open the search box of blogger template

Step 3: Paste or type of the following tag inside the search box and hit Enter to Find the code given below

]]></b:skin>
Step 4: When you find the code given above this line. Just The Below CSS above ]]></b:skin>

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

So Finally save your template and you can all don.

If you want to change its color so change it with your own demand. Here is tool from that may help to pick your favorite color : Color Code Generator









No comments