Below you will obtain the code for customized subscription form and i will teach you how to customize it based on your requirements and site's template.
CODE:
- <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/iDBrh','popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"action="http://feedburner.google.com/fb/a/mailverify" style="height:65px; width:450px;background-color:#000000; border:2px solid black; border-radius:5px 5px 5px 5px;float:left;">
- <b style="color:#ffffff; align:left;position:relative; top:25px;right:170px;">SUBSCRIBE TO OUR FEEDS</b>
- <input name="email" style="width: 185px; height: 23px;position: relative; float: left; top: 19px; left:175px;border-radius:5px;" type="text" />
- <input name="uri" value="http://feeds.feedburner.com/blogspot/iDBrh"type="hidden" />
- <input value="en_US" name="loc" type="hidden" /><input value="Go" style=" border:medium none; height: 27px; padding: 0px 0px; font-family: georgia; font-size: 14px; font-weight: bold; color:black; padding:7px; background-color:#0080FF; margin-top:7px; margin-right:7px; display:block; position:relative; left:200px; top:-5px; " type="Submit" />
- </form>
EXPLANATION:
The above code can be split into three parts that is a text box, Ask for subscription and the button for submitting it.Now lets move into customizing the code for your site
- The background color of the above form can modified by changing the background-color value #000000 in the first part of the code.You can assign any color values that may give your form a dashing looks.
- Next comes the text part used to illustrate its purpose to the visitors and i have added it inside a <b> tag in order to give a bold look those text.
- You can change the color of the text by changing the color value #ffffff in that code.
- Now you need to change the URL of my blog to your blog's feed URL to do so just replace the code "http://feeds.feedburner.com/blogspot/iDBrh" with your feed URL.
- Change the background color of the button by replacing the code #0080FF with your desired color.
- Not the above code consists of different elements combined to make a simple form and not a single element.
- In case you face any problems with positioning the elements the all you have to do is adjust the position property "position:relative; left:200px; top:-5px;"in the code.
- Change the value of pixels unless you get the position of the elements right.
- Once its done then save the code in your site and you will see the number of subscribers increases as well your site looks.
