How To Customize The Comment Box In Blogger

One way of attracting the readers to give comment to your article is having a comment box more  unique and attractive to them. 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, so it is very necessary to spend a little of our time to make this part looking 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 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/AVvXsEgT9qMzP8Uv3qQTe218LVikjOurXZ4_y7paiVsp2PubizfnP81c99-GKuEhFgp1RTv6UG9fZn9dRBW5ygs6powlvUhoCnW2xjxgVPOcdTwADKYipDRS53PiezQOczIL2mjREI-ELvHsWnug/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/AVvXsEig2any2_OROYVRJG4fe69FnOQVEwbr14b_Eb4sckawDOIA7RctqiiSy49wDvzvKysBgc51SUCHkGrmy-uy0_C4Fn0vdnhcFJOI2gsJPIbI-rKxIZCU-pbTN5qFvSZWURsxzOwz7Ye6e3EA/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:
Note: you can choose here your various types of hexadecimal colors.

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, click here.
  
• 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. Enjoy!
credits goes to My bloggertricks with little modification by me.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook