How To Customize Blogger Comment Form

In my previous post i have explained about how to attract new commentators. Designing the comment section of your blog and keeping it clean and easy also helps you in attracting new commentators to comment on your blog. An ugly comment box never catches the visitors eye. Today i will explain briefly on how to customize the blogger comment form. Let us move on with the tutorial and discuss every elements in it.

How To Customize Blogger Comment Form

Customizing the comment form of the blogger blog takes only two steps, i.e creating a Css style for the comment form and changing the div id of the default comment form of blogger.

Changing the Div Id

The default comment form of blogger is associated with div id 'comment-form'. 

• Go to your blogger dashboard --> Template --> Edit Html(Tick expand widget template option).
• Find(Ctrl+F) for <div class='comment-form'> and replace it with the following code.

          <div id='btcomment-form'>

Creating the New Css Style for the Comment Form:

Firstly, we will write a Css style for active comment form. As the comment form is called inside iframe in blogger, we must use iframe tag along with the div id specified. So here is the style for active comment form.

#btcomment-form iframe{
background:#000 url("image url");
width:550px;
padding:5px;
border:3px solid #E5F502;
font:normal 12pt "ms sans serif",arial;
color:#fff;
}

Secondly, we need to write a style for mouse hover effect(optional) of comment form. Which should be like this,

#btcomment-form iframe: hover{
background:#000 url("image url");
border:3px dotted #E5F502;
}

Finally, we need to write style for links inside the comment form.

#btcomment-form a{
text-decoration:underline;
color:#fff;
}

Understanding Css Tags(Newbies)

Let us understand the different styles written above. Hope you are aware of defining style elements for active, hover and link of comment form. let us understand the different tags inside this.

          background:#000 url("image url"); 
==>This is the main part here. You can define background color or image using this tag.

• Here #000 is the hexadecimal value of color. 
• Suppose if you have a texture like image, you can replace the image url with the url of your image. 
• Suppose if you have a image like logo, which you wish to place at a corner of the form keeping the background color same, then you need to specify no repeat and position along with the image like this.

            background:#000 url("logo url")no-repeat top right;


width:550px;
==>This tag is to specify the width of the form with respect to pixels.


padding:5px;
==>This tag is to adjust the padding's of the form.


border:3px solid #E5F502;
==>Here we will specify the border thickness, type and color of the border. You can use the border types like solid, dotted and transparent.


font:normal 12pt "ms sans serif",arial;
color:#fff;
==> These tags are to define the font size, font family and the text color.


Hope you are now well aware of writing your own styles for your comment form. Define your own styles for active, mouse hover and links of comment form and get it ready like this.

#btcomment-form iframe{
background:#000 url("image url");
width:550px;
padding:5px;
border:3px solid #E5F502;
font:normal 12pt "ms sans serif",arial;
color:#fff;
}
#btcomment-form iframe: hover{
background:#000 url("image url");
border:3px dotted #E5F502;
}
#btcomment-form a{
text-decoration:underline;
color:#fff;
}

You have defined your custom style now.

Adding the custom style in Blogger

1. Go to blogger dashboard --> Template --> Edit Html.

2. Find(Ctrl+F) for ]]></b:skin> and place your Css style code just above it.

3. Save the Template.


View your comment form now with your own customizations. Hope you got some knowledge regarding Css too with this tutorial. Kindly let me know if you face any issue in customizing your comment form. Take care Pals.