3 Customized Stylish Comment Box For Blogger


Stylish Comment Box for Blogger/BlogSpot


Comment Box is the most interesting section of a website, and a stylish customized comment box is a great way to collect feedback from your website’s visitors. Today In this article I am going to show you how you can customize your comment box for your Blogger/BlogSpot Blog. I will also provide you HTML, CSS code to make your comment box more stylish and attractive.


customized stylish comment box for blogger


BlogSpot own comment box is not very eye-catching to attract your blog reader, Stylish comment boxes for BlogSpot that I am going to provide are very attractive, customized and responsive.

Must Read > Custom Robots Header Tags Best Settings for Blogger

Advantages of Stylish Comment Box for Blogger:



  1. With “Customized stylish comments box” you blog looks professional, attractive and stylish.
  2. Stylish Comment box For Blogger” encourages other readers of the blog to participate actively.
  3. You can improve your blog posts quality by reading your blog reader's suggestions.

I am going to provide you pure CSS code for a stylish comment box for your BlogSpot blog because any third party script slow down your website, this CSS code will not affect your Blogger site’s speed.

CSS Code for Customized Stylish Comment Boxes


Style 1:

1 stylish comment box for blogger


.comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;} .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px;} .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px;} .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px;} .comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;} .comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;} .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;} .comments .comments-content .comment:first-child { padding-top: 0px;} .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;} .comments .comments-content .icon.blog-author { background-image: none;}

Style 2:

2 stylish comment box for blogger


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


Style 3:

3 stylish comment box for blogger



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

How To Add Customized Comment Box In Blogger/BlogSpot?


Step 1:

 Go to à Blogger


customized blogger comment box

Step 2:

Go to à Theme


beautiful responsive comment box for blogger

Step 3:

Click On à Customize


stylish comment box for blogger blogspot

Step 4:

Go to à Advanced Tab


stylish comment section of blogger website

Step 5:

Go to à Add “CSS Code for Stylish Blogger Comment Box


css code for stylish comment box for blogspot

Step 6:

Paste Your “Stylish Comment Box CSS Code” in the Box


stylish comment box for blogger

Step 7:

Finally, Click on “Apply Now” to save your Settings


custom stylish search box for blogger



Congratulations! Check Your Blogger/BlogSpot Comment Box.

Check our comments box also and give us your suggestions that how we can improve the quality of our blog posts.

Post a Comment

5 Comments

  1. Amazing comment boxes . i really love it...

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. I appreciate your effort and your thoughts. it’s really good work.Although I would like to share something really helpful for #custom Boxes in UK.

    Click here to read
    https://realitypaper.com/wholesale-soap-packaging-boxes-uk-give-your-soap-products-a-customized-look-at-affordable-rates.html

    ReplyDelete