In this post we will discuss about customizing the default comment system in blogger. This customization can be done with help of CSS code. This CSS code changes your old comment system design into completely new and attractive design. Adding this custom comment box design to blogger very easy. It can be integrated into your blog in just few minutes. You can also easily customize this design according to your blog`s design. It will match your blog`s color scheme perfectly.
Why you need to customize default blogger comment system ?
Default blogger comment system is not very attractive. It has very old and dull design which looks very ugly on any blog. so to get rid of this ugly and old design you need customize your comment system. Moreover a good comment system also helps in attracting your blog visitors towards it.
How to Customize comment box in blogger ?
- Log in to your blogger dashboard.
- Select your blog.
- Select Template option.
- Click Edit HTML option.
- Find following piece of code in template code.
]]></b:skin>
- Paste following code just above it and save the template.
- Open your blog to see the new changes
Code for custom comment system
.comments h4
{
color:#ffffff;
display: inline-block !important;
background:#3BB7D9;
padding:10px;
}
.comments .comment .comment-actions a {
background:#3BB7D9;
border-radius: 5px;
color: #ffffff;
font:12px georgia;
margin-right: 8px;
padding:5px;
text-decoration: none !important;
}
.comments .comment-block {
background:#f8f8f8;
border: 1px solid #f0f0f0;
padding: 10px;
}
.continue
{
border-top:none !important;
}
.continue a {
background:#3BB7D9;
border: 1px solid #3BB7D9;
border-radius:5px;
color: #ffffff;
display: inline-block !important;
margin-top: 8px;
padding:5px;
text-decoration: none !important;
font:12px georgia ,arial;
}
.comment-header a {
color: #222222 !important;
}
#comments .avatar-image-container img {
border:2px solid #f0f0f0;
border-radius: 50px 50px 50px 50px;
height: 58px;
max-width: 58px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #dcdcdc;
float: left;
margin-left: -20px;
max-height: 61px !important;
overflow: hidden;
width: 61px !important;
}
Note: In the above code change the value of #3BB7D9; with your own choice of color.
Popular Search Keywords: blogger templates,blog templates,Blogging tips,Template design,Online Earning,HTML editing,Tips and Tricks,Earn Money online,Earn from Bangladesh,Online solution,blogger,blogging,blog,blogs,design,wordpress,development.
