Skip to main content

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.

How To Customize Comment Box In Blogger

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.

How To Customize Comment Box In Blogger

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

Comments

  1. Do you have a screenshot of how it will look like after? Thanks.

    ReplyDelete
  2. Give me your Blog URL and I will show you How it will look in your Blog.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Get Unlimited Ammo and Health in IGI 2

After many days I am sharing a cool and interesting trick for game lovers. Do you enjoy playing IGI2? Of course you like this game. But many of you may be facing verious difficult situations in completing this game. It's because the missions are really tough and you can't complete whole IGI 2 without using it's cheat codes. There are many hacking tricks for IGI available in the Internet but most of them don't work. And this is the reason I am sharing these cheat codes to you. After reading this post you will be able to play this game without losing any health and ammo. We'll use a lite application to achieve the immortality and infinite number of ammo in this game. You will have to download the software from the link that I will provide you a little later in this post. Let's first know what this software will do. It will allow you to keep your health unlimited in IGI game. And if the health will not decrease then you will never die in the game IGI. You wil

Remove "Restore Previous Versions" Option from Context Menu in Windows

Windows has a feature which lets you to restore the previous versions of any drive, folders, or files. Actually, it is a part of " File History " service of Windows which helps in recovering accidentally deleted files by copying them to a backup location. If you don't need this service, then you can can disable this by turning off the File History service in Services Manager. Open Run dialog box by pressing Windows and R key simultaneously. Type services.msc and press OK. It'll open Services Manager. In Services Manager, right click on the " File History Service " and choose Properties . Now, change the startup type to Disabled and then click on the Apply button. Done! After disabling this service, you'll notice that the " Restore Previous Versions " item is still available in the Context Menu. Follow the following steps if you want to get rid of the " Restore Previous Versions " from the Context Menu in your Win

Firefox Focus is Now Available on Android

There are large number of web browsers available for Android, some put efforts on minimalistic design, a bit of them offers wide variety of add-ons, few of them focuses on saving data, many are there to collect your private information but hardly any of them offers robust privacy. Firefox Focus is a web browser by Mozilla which is centered around private browsing. It is a super simple browser, which blocks any content trackers and ads. It has a powerful Stealth mode which blocks its screenshots in Recent Apps. Firefox Focus was launched on Apple App Store a year ago, and now it's available for Android with many new features. This browsers doesn't offers as many features as other browsers but it offers a robust privacy protection in it's minimalistic interface. The design is so soothing that you may want to to replace your feature rich browser with Focus even if you're not particularly concerned about ads and trackers! Unlike Firefox, it doesn't have