How To Add Attractive / Stylish Comments Box in Blogger with CSS

Hello Blogger Today We Will Discuss That How To Add Attractive / Stylish Comment Box In blogger Just By Adding Css Code Blogger Template in just 2 minutes . Blogger Already Have Have Comment Box Which Is Simple But Look Great But If You Want To Customize and make the comment box stylish due to any reason than You Are At The Right Place It Is Very Easy . Just Follow The Step That I do And You Will Convert Your Old Comment Box IN New Customized Comment Box Which Visitor Will Surely Like.You Can Change The Color Of That Customized Comment Box And It Will Perfectly Match What Ever Blogger Theme You Use So With out Wasting Any More Time Lets Begin..

How To Add  Attractive / Stylish Comments Box in Blogger with CSS

• Login in to Blogger Account By Going To Blogger.com
• Select The Blog From The List .
• Then Go to > Template > Customized.
• Select > Advanced > Click CSS from the list
• Copy The Below Code From The Box.
• Paste The Following Code In the Css Box.

.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; }
You Are Done Now

Now Do Your Own Customization

• Change Background Color by changing this no #3BB7D9 
• You Can Change Comment Counter Color.
• You Can Change Comment Sender Reply button
• You Can Change Comment (message) Section Background
• You Can Add a Line in Between Replies Reply & Add Comment Button
• You Can Change in Replies Reply Button & Add Comment.
• You Can Change Comment Sender Name & Date
• You Can Change Comments Avatar Image Size
• You Can Change Comment Avatar Images Shape & Border
• If you Want To Change Avatar Image in Square then Change All Radius Value “0”                 

Conclusion 

After Reading This Post I hope You are Able To Customized Your Comment Box. And If You Like Or Enjoy This Post Little Then Please Link To This Post. If You Face Any Problem Then Please Feel Free To Comment In The Comment Box Below I will Reply With In 6 Hours.