
All of us like to have a good template with matching design and widgets. Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.
-
-
Your Original Code would be like this:
<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://www.feedburner.com/fb/a/emailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=Your feed ID here‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′;);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”http://feeds.feedburner.com/~e?ffid=Your feed ID here” name=”url”/><input type=”hidden” value=”your blog name” name=”title”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://www.feedburner.com” target=”_blank”>FeedBurner</a></p></form>
-
-
-
Change Background Colour:
To change the background colour, add:
background: #00BB11just after,
text-align:center;So the Code would be:
<form style=”border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;“(For RGB Color Codes Chart, click here)
-
-
-
Add a Background Image:
To add a background image, add:
background: url(your image url here);just after,
text-align:center;So the Code would be:
<form action=”http://www.feedburner.com/fb/a/emailverify” style=”border:1px solid #ccc;padding:3px;text-align:center;background: url(your image url here);”
(Change the image URL to add your own)
-
-
-
Change the Width of the Textbox:
To change the width of the Textbox, you need to alter the code:
width:140px(You can just increase or reduce the size according to your requirements)
For example:
<input type=”text” style=”width:250px” name=”email”/>
-
-
Add Default Text in the Textbox:
You can add a default text in the textbox to make it more attractive to the visitors. Just use this simple technique:
Remove the code:
<p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p>
and replace it with
<input type=”text” style=”width:240px” name=”email” value=”Enter your email address” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”/>
Need some more customization? Read Part-2 here!