3 Customized Stylish Comment Box For Blogger

Stylish Comment Section for BlogSpot

The 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 or BlogSpot blog.

I will also provide you with a comment box HTML code for Blogger and CSS codes to make your comment box more stylish and attractive.

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

Must Read: How to add Stylish Email Subscription Widget to BlogSpot?

Advantages of Stylish Blogger Comment Box:

  • With a customized, stylish comments box, your blog looks professional, attractive, and stylish.
  • Stylish Comment Box For Blogger encourages other readers of the blog to participate actively.
  • You can improve the quality of your blog posts by reading your blog readers’ suggestions.

I am going to provide you with pure CSS code for a stylish comment box for your BlogSpot blog because any third-party script slows down your website. This CSS code will not affect your blogger site’s speed.

Must Read: Related posts widget for Blogger with Thumbnails

CSS Code for Customized Stylish Comment Boxes:

Style 1:

.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:

.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:

.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 Customize the Comment Box In Blogger/BlogSpot?

Stylish Comment Box for Blogger:

Step 1:

Go to –> Blogger

Step 2:

Go to –> Theme

Step 3:

Click On –> Customize

Step 4:

Go to –> Advanced Tab

Step 5:

Go to –> Add “CSS Code for Stylish Blogger Comment Box”

Step 6:

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

Step 7: Final step to add Stylish Comment Box for Blogger:

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

Congratulations! Check your Blogger or BlogSpot comment box.

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

Leave a Reply