How To Customize The Comment Box In Blogger

It is undeniable that uniqueness brings attraction for the readers to post comment to our article. As bloggers we all know that comments are vital part of a blog article because through it the readers can reflect their opinions regarding the post or our blog.It is therefore essentially wise to spend a little of our time to make this part to look more presentable, accessible, and neat. In this tutorial, I will show very simple steps on how to customize the comment box.

How to Add Beautiful Customization with the Comment Box

Step1. Go To Blogger Dashboard
Step2. Click Layout >> Edit HTML
Step 3. Check “Expand Widget Templates”  box at the top right corner.

Step 4.Search  the code below,  use" Control F" to help you locate faster the code. (Select  the second occurrence of the code)

<div class='comment-form'>

Step 5. Replace it with the code below

<div id='btt-form'>

 Step 6.   Now Search for the code: ]]></b:skin>,  again use  Control F

 Step 7.   Just above ]]></b:skin>, you paste the following  code below,

#btt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWV1AA8HyBz1m0-1sgWMOh7Em9ZxWL0CMvF32yAf9VmQMi_J3n0qWPG2QqAi-FZposzTFKUu2e6D5gFfbzI7Q_6uXJAcqFBHdCXStTbxiD75KvpocOLCo6rRS6_CQ9iJ-XncuqFRPr-lbZ/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#btt-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEO8jG0KEqkB2IEvrLZ-Nf_Jom75Cx7xxrlTAupD0IPzi3lGN7vZdxyjY-Y5zF27PPrstMsEJ8RJIs3W5CTtJ9xVPTlsAWKoXFrwVe1MXVKhR7o-rNeJIA0haeyRycF_rnG0vtqGCZuCt/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#btt-form a{
color:#7EB2AC;
}

Customization of the  three parts of the code:

1. First part of  the code (#btt-form iframe )
 >> Comment box in in active mode (not in hover effect)

• To change the background of the comment box frame, change#ffffff 
• To change the the background image , change the url with your own url image. You can place it in top left, top right,bottom left or bottom right position. In this blog , I position it in the bottom right.
• To change the border size of the frame, change 7px 
• To change the border styles, change the  solid with dotted or any border styles that you like. for more border styles
• To change the  border color, change #C7C7C7
• To change the distance between the comment form border and the text area, change 5px
• To change style of the text,  bolness or normal, font size,font family, color and the width of the text "Comment as", change the attributes of the following code:

           font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px
2. The second part of  the code (#btt-form iframe:hover)
 >> Comment box in hover effect mode
The explanation with regards to its border, background,  etc. is almost the same, the only difference is it will only affects the frame styles when the mouse will hover in it.
3. The third part of  the code (#btt-form a)
This part explains the color of these two links -> “Sign out” and “Subscribe by email” . These links appear at bottom right corner of every Blogger Comment Form.
To change the color of the text "Sign out" and "Subscribe by e-mail", change the  hexadecimal color code "#7EB2AC"
 Step 8. After customizing  the  CSS code above, save your  template and you are done. 

Take care and Enjoy Friends!