Hi friends, If you are blogging on Blogger and want to know how you can customize the comments box, then you are in right place where you can get the CSS code to design or customise the Blogger comments box. As you know the default comment box of blogger is simple and you may not like it very much, but if you can customize the comment box using CSS codes then it will look very much pretty. So why are you waiting for, please go through the tutorial and customize the comments box.
What to Do For Comment Box Customization?
Do not worry you can easily do this customization and we will briefly describe it. If you are new to Blogger and recently starts your blog, then you can also learn how to customize comment box here. For comment box customization you need to add some bunch of CSS code in your Blogger XML template then save the template and see the magic.
How to Customize Comments Box Blogger?
Now save the Template and visit a page with comments then see the comments style, it's really cool. So this the simple comments box customization code to help you to design the Blogger comments box to looks better.
What to Do For Comment Box Customization?
Do not worry you can easily do this customization and we will briefly describe it. If you are new to Blogger and recently starts your blog, then you can also learn how to customize comment box here. For comment box customization you need to add some bunch of CSS code in your Blogger XML template then save the template and see the magic.
 |
| How to Customize Blogger Comments Box |
- Log in to your Blogger account and choose the blog you want edit.
- Then select Theme and then click on EDIT HTML.
- Now press CTRL+F and find <b:skin> and paste the below CSS code just below <b:skin>
#comments h4{font-size:22px;margin-bottom:10px}
.comments .comment-block { background: #fcfcfc; color: #474040; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 55px; 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: -25px; 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: 6px solid #d5f2d0; border-radius:60px;}
.comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:25px;}
.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;}
.comments .comment-block { background: #fcfcfc; color: #474040; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 55px; 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: -25px; 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: 6px solid #d5f2d0; border-radius:60px;}
.comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:25px;}
.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;}
Now save the Template and visit a page with comments then see the comments style, it's really cool. So this the simple comments box customization code to help you to design the Blogger comments box to looks better.
 |
| How to Customize Blogger Comment Box - CSS Code |
Please Share Your Thoughts