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





1 comment: