Customize Feedburner Email Subscription Form

Add or Change Background Colour on FeedBurner Email Subscription Form

Add the background image code (e.g. background: url(http://www.example.com/image.jpg)) right after text-align:center;
So the code would be:-

<form style=”border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.example.com/image.jpg);”
You can change the image URL to add your own.

Change the Width and Height of the Text Box

Adjust the width of the text box width:140px to your requirements.

<input type=”text” style=”width:140px” name=”email”/>

You can change with your desire width.

If you want to change the height of the text box, simply add height:20px right afterwidth:140px and adjust the height to your requirements.

<input type=”text” style=”width:140px;height:20px;” name=”email”/>

You can change with your desire height.

Add or Change Background Image on FeedBurner Email Subscription Form

Add the background image code (e.g. background: url(http://www.example.com/image.jpg)) right after text-align:center;

So the code would be:-

<form style=”border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.example.com/image.jpg);”

You can change the image URL to add your own.

Add Default Text in the Text Box

You can add a default text in the text box to make it more attractive to the visitors.
Just remove the code below

<p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p>
and replace with

<p><input type=”text” style=”width:140px” name=”email” onblur=”if (this.value == ”) {this.value = ‘Enter your email address’;}” onfocus=”if (this.value == ‘Enter your email address’) {this.value = ”;}” value=”Enter your email address”/></p>

You can change with your desire default text.

How to Change Font Size and Font Colour of the Text

Add font-size:20px;color:#00CCFF right after width:140px

So the code would be:-

<input type=”text” style=”width:140px;font-size:20px;color:#00CCFF;” name=”email”/>
You can change with your desire font size and font colour.

How to Remove “Delivered by Feedburner” Link

Just remove the following part from your code:

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>

This entry was posted in Blogger Guides and tagged . Bookmark the permalink.