How to Add Customized Comment Box in Blogger (Step-by-Step) Guide

Welcome by dear team, i can't do without you. thanks a lot for all your support to this site wavyearners.blogspot.com. Today, we are going to learn how to add a customized blogger comment box for blogspot user.

so if you are a blogspot user, then this tip is just what you need it getting a wonderful comment box for yor viewers..

IF YOU HAVEN'T BEEN MOVING WITH US, YOU CAN STILL CHECK BACK BY USING THE BELOW LINKS

read this: how to create download button in blogger
read this: how to setup SEO for blogger/blogspot users
read this: how to place ads code in blogger


ok now, good i believe you are with us. now lets learn how to add a custumized omment blox in blogger with step by step tutorial filled with pictures.

HOW TO ADD A CUSTOMIZED COMMENT BOX ON BLOGGER

STEP 1>>>>>>>> go to your blogger dashboard. blogger.com and click on "themes" after themes, we now click "edit HTML"

STEP 2>>>>>>>    now it is a very trickish part you won;'t like to make mistake if you are a total newbie to blogging.  now we click on the writing pad/box and use our CRTL + F (find) then search “ ]]></b:skin> ” . when find. you paste the code below >>> just above  “ ]]></b:skin> ”. see picture below for reference.  

>>>>CODE TO PASTE<<<<

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

AFTER PASTING THIS HTML CODE, YOU CAN NOW SAVE YOU TEMPLATE.

.

STEP 3>>>>>>>>> Now go to view blog from your blogger dashboard to view your new effect

HOW TO ADD A CUSTOMIZED COMMENT BOX ON BLOGGER

• Tweet
• Share
• Share
• Share
• Share