How To Customize Comment Box In Blogger

Hello H&T Users, Here Is My New Trick For Your Blogger Blog Which Will Help You In Customizing your Comment Box In Blogspot Blog. The default comment box style looks ugly and it will not please your visitors to comment. But it doesn't mean that only the comment system style is necessary. Let's Start The Tutorial.

Customizing Comments In Blogger

Customization is done with the help of CSS code. The CSS code which you will get in this blog will completely change your old comment system and adds a new design. It is integrated in the template in seconds. Follow each step carefully.

Note : It is very important to Make a Backup of Blogger Template. After creating a Backup follow this tutorial.

Step #1
Go To Blogger Home > Dashboard > Template > Edit HTML

Step #2
Click anywhere in the code area and Press Ctrl+F To Find : Look for ]]></b:skin> tag in the template (Use search to find)

Step #3
Now Paste The Code Given Below Just Above or before ]]></b:skin>.

Code To Paste:

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

Step #4
Preview your Template to make sure their isn't any errors and if everything looks fine than Save your Template.

Take a look at the screenshot of the comment system below that will look like after the customization.

Well the above comment box style for blogger is little simple. If you want the one with little more effect and advanced features than you may like to add the below code rather than above code. Just forget about the above code and the code which has much more features. This Blogger comment box is really awesome.

Note: Nothing so much special from the above style but color change and Mouse Hover effect is added in the style given below.
Now the time for Customization of the cool comment box.

Go To Blogger Home > Dashboard > Template > Edit HTML.
Now Search For "]]><" without the quotes and than Paste the code given below just above/before "]]><"

.comments h4
{
color:#ffffff;
display: inline-block !important;
background:#292832;
padding:10px;
}
.comments .comment .comment-actions a {
background:#292832;
border-radius: 5px;
color: #ffffff;
font:12px georgia;
margin-right: 8px;
padding:5px;
text-decoration: none !important;
}
.comments .comment .comment-actions a:hover {
background:#808080;
border-radius: 5px;
color: #292832;
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:#292832;
border: 1px solid #292832;
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 #292832;
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;
}

Using the above code will make your Comment and Reply Thread to like the below given image.

If You Followed Each Step Carefully Than you Should Have Changed The Design Of Your Comment Box. Enjoy the Comment System style in your Blogger blog. Keep visiting for more Tweaks.

You May Also Like
How To Remove Powered By Blogger Attribution