Blogger recently introduced several features for it's user.Most awaited threaded comment is one of them.Blogger launched them after inspiring by wordpress,another blogging platform.Wordpress do have several other features enable along with this threaded comment system.Blogger threaded comment system is not so advance compoaratively to wordpress.So many tried their best to customize and give a better improved look to blogger threaded comment system to make in more attractive.As per other fellow bloggers we're also trying to make it more attractive and as a result of that we just used some css to make an improved version of threaded comment system for our blog reader.So,today in this post we're going to share this highly customized comment system for blogger with different colour author comment box.If you wanna see a demo,check the screenshot.You have to do some simple steps to install it on blogger.So lets move onto the the below tutorial part.
Must Read : Enable Blogger Thraded Comment SystemCustomize Blogger Comment System
- log onto blogger dashboard>template>edit html>proceed
- search for ]]></b:skin> and before it paste the below css codes.
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #A9F5D0;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}
.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}
.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {color:#4D3123;text-decoration:none;}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}
- Now save the template and you're done
Now Just a look onto your new designed comment system,hope you'll like it.Don't forget to share your view with us.Happy blogging guys!!!!!
|
|
Articles You May Like |
About The Author
That's great! Will bookmark this, as I also making Blogger Templates too. :)
ReplyDelete<a href="http://www.itsmedeann.com>Deann</a>
Pretty cool! I'm sure other people would love this!
ReplyDeletethis is great though it doesn't work with my template since threaded commenting system doesn't work properly so I am just using Disqus.. still, I find it as a good design.. easily customizable.. :)
ReplyDeleteCool. Will try this on my blog. Thanks!
ReplyDeleteyou're welcome.keep visiting :)
DeleteCool, will share this to those using blogspot!
ReplyDeleteThanks for sharing. Will help me a lot with my Designing Express Blogger blog.
ReplyDelete