How to Customize your Feedburner Email Subscription Form

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.

So let’s start !

1. Your Original Code will 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&#8242;);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>

   
   

   
   

   
   

   2.Change Background Colour:

   
   To change the background colour, add:

   background: #00BB11

   just after,

   text-align:center;

   So the Code will be:

   <form style=”border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;“

   (For RGB Color Codes Chart, click here)

   
   

   3.Add a Background Image:

   To add a background image, add:

   To add a background image, add:

   
   

   just after,

   
   

   text-align:center;

   
   

   <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)

   
   

   4.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”/>

   5.Add Default Text in the Textbox:

   
   You can add some dafault 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;”/>

   6.Changing the height of the textbox:

   To change the height of the textbox, add:

   height:22px;

   just after,

   style=”width:255px;

   So the part of the Code will be:

   style=”width:255px;height:22px;…..

   (You can change the height according to your requirements)

   7.Changing Font-Colour and Font-Size of the Text:

   You can also change the font-size and colour of the text that users enters in the textbox.
   Add:

   font-size:15px;color:#AA33FF

   just after,

   style=”width:255px;

   So the Code will be:

   style=”width:255px;height:22px;font-size:15px;color:#000000…

   (Change the size and colour to make it more attractive and matching with your template)

   8.Changing the Style of ‘Subscribe’ Button:

   To change the style of the button, you need to add a small piece of code to your template.

   • Go to Edit Template in the Blogger Layout
   • Search(Ctrl+F) for ]]></b:skin>
   • Add the following code just before ]]></b:skin>

   .button {

   background-color: #cc0000;

   font-size: 80%;

   font-family:Tahoma;

   font-weight: bold;

   color:#ffffff; }

   
   

   • Save the Template
   • Now make a slight alteration to your Feedburner Email Widget code:
     Replace:

   <input type=”submit” value=”Subscribe” />

   
   

   with,

   
   

   <input type=”submit” value=”Subscribe” class=”button”/>

   
   

   you can change the size,colour and face of the font

   
   

   9.Removing Delivered by Feedburner Link:

   It’s very simple!
   Just remove:

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

   Drops your comments below if you liked my tips!

   THANKS TO-tipsblogger