5 [Simple] steps to Add Comment Box in Blogger

Comments box on a website is mainly dependent on the website's theme. In Blogger, the comment box is simple and unattractive but using some HTML code one can create a good designed Customized Blogger Comment box.

So in this blog post, I will be explaining "How to add comment box in Blogger" using HTML code.

Without further delay let's jump into it.

Add Comment Box in Blogger Page

1. Login to your Google Blogger account.



2. Select "Theme" from the left navigation panel.







Fig 1





3. On the main page, click on the "Down Arrow" icon near the Customize button and select the "Edit HTML" option.






Fig 2







Fig 3





4. Now on your blogger HTML Editor, click anywhere on the page and press "Ctrl+F" to open the search box then find "]]></b:skin>" and paste the following HTML code above the "]]></b:skin>" tag.



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






Fig 4





5. Now press the "Save" icon to save the template

Your customized comment box is added to your website, view any of your blog posts to see that wonderful comment box on your website as shown in Fig 5.

Fig 5

Thus this how to add a comment box code on the blogger.

Benefits of adding Custom Comment Box

• Adding a well-designed custom box will encourage readers to comment on your blog post which in turn helps in your SEO.

• Having a good custom box helps readers to have a healthy discussion about your blog post on your website.

• An unattractive comment box with spam comments makes visitors leave your website. 

Conclusion

I think I have given a clear explanation on how to add a custom comment box in blogger.

I hope you find this blog post helpful.

Please comment on your thoughts about this blog post and about my website.

If you want to learn more about Blogging, SEO and YouTube then I suggest you guys check out my following articles.

Read - Top 5 [Free] Blogger Templates best for Adsense.

Read - 1 [Easiest] way to Remove Footer Credit in Blogger Template.

 

Read - 6 (Important) steps to do if your Google Adsense is Still Under Review.

Stay connected with this website to receive tips about Blogging.

If you like this article, please share it to help other others who are all struggling with this same problem that you're facing, and after all,

Sharing is Caring.

Thank you, Have a nice day.