Technobuz

Any blogger strives to write quality content there by driving good traffic to his/her site.Writing quality contents is bound to convert causal readers in to regular readers making them subscribe to the site feed.
But its always said looks do matter it can bring even more better results.Rightly placed Subscription form and Beautifully designed Subscription form can impact a huge difference in results.In this post lets see how to spice up looks and gracefulness of your FeedBurner Email Subscription Forms.

1.Background

Background Color:To change background color of your Feed Burner all you need is to add this line in your Css.

[php]
.formcolor{

background:#Color-code none repeat scroll 0 0;

}
[/php]

And wrap your form code with div tag.

[html]
<div class="formcolor">Feedburner Form code</div>
[/html]

Background Image:To change background image of your Feed Burner all you need is to add this line in your Css.

[html]
.formbkg{

background-image: url(image url);

}
[/html]

And wrap your form code with div tag.

[html]
<div class="formbkg">Feedburner Form code</div>
[/html]

2.Rounded Edges and Borders

Round Edges add more grace to your form.Lets see how to do it.

Add the below code to your CSS

[html]
.rounded{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border:5px solid #000000;
margin:6px 0 20px;
padding:20px;
}
[/html]

And wrap the div tag around Feed burner code.

3.OnFocus

Emptying TextArea:

Initially you can assign text to textarea which can be emptied once user click on the TextBox using the following code.

[html]
<input name="email" type="text" <strong> onfocus="this.value=”" </strong> value="Enter your email id.."/>
[/html]

Highlighting TextBox onFoucus:

Text area can be Highlighted on Focus this the below code in CSS.

[html]
#highlight textarea:focus, #sign input:focus {
border:2px ridge #990000;
}
[/html]

And wrapping div tag around Form Code.

[html]<div id="highlight">Feedburner code</div>[/html]

4.Hover Effects

You can change the color off the subscribe button by using the following code in CSS.

[html]
.button:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#Color-Code none repeat scroll 0 0;
}
[/html]

And wrap the button field with div tag as usual.

Hope the tutorial was useful.Start customizing you feedburner Form from now on.Share your thoughts .How useful was it to you?