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.
BlogSpot's 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: FAQs About Blogger (BlogSpot)
Advantages of Stylish Comment Box for Blogger:
- 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 your blog post 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 slows down your website, this CSS code will not affect your blogger site’s speed.
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 Add Customized Comment Box In Blogger/BlogSpot?
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:
Finally, Click on “Apply Now” to save your Settings
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