How to Customize your Feedburner Email Subscription Form (Part-2)



This is the Part-2 of my previous post on How to Customize your Feedburner Email Subscription Form. Do read Part-1 before reading this second part.
This part contains a little complex still easy tips to customize the feedburner email widget. Customization continues… :)

  1. 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 would be:

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

    (You can change the height according to your requirements)

  2. 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;

    Example:

    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)

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

  4. Removing Delivered by Feedburner Link:

    It’s very simple!
    Just remove the following part from your code:

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

Drops your comments below if you like these tips! :)



You May Also Like:

Article by Shafar.
About the Author: Tech Freak, Android Lover, Wordpress Addict, Social Media Junkie and the Founder of TipsBlogger.
To submit guest posts to TipsBlogger, please read the Guidelines.


31 Responsesto “How to Customize your Feedburner Email Subscription Form (Part-2)”

  1. Brazen Lass says:
    October 2, 2008 at 4:13 am

    thanks for the tips!!!

  2. universomethodic says:
    December 28, 2008 at 11:25 pm

    Really nice tip man.Thanks a lot

  3. iGuy says:
    January 1, 2009 at 10:12 am

    Thanks a lot man…really good

  4. Anonymous says:
    January 27, 2009 at 8:14 pm

    very nice post and blog too

  5. Sriz says:
    February 7, 2009 at 10:06 am

    Thanks for your suggestions..Ive implemented a few in my blog :)

  6. corey d says:
    March 16, 2009 at 7:37 pm

    great instructions, worked perfectly!! thanks!!

  7. shirls says:
    March 17, 2009 at 3:56 pm

    Hi Thanks so much for the tips ! :) I still have one question. How do I remove the extra white space between 'Enter your email address' & the textbox & the subcribe button? Is it to do with the line-height or something? I just want to make the whole form smaller.It is much appreciated for your time and help !:)

  8. Shafar says:
    March 18, 2009 at 10:07 am

    @shirls
    Hi shirls, please add the entire code of your email widget here. I’ll find out how you got unnecessary white spaces! (or mail me the code: shafar@tipsblogger.com)And do drop your site link while commenting henceforth.

  9. Shirls says:
    March 18, 2009 at 3:21 pm

    HI Shafar,Thanks for quick reply. I really appreciate.I just realised I can’t post the codes here, and have emailed you the codes. Thanks again ! :)

  10. Alex says:
    April 4, 2009 at 1:47 pm

    Hi,I’m introducing feeds to my website and your tips work wonders! Thanks!

  11. Fetra says:
    April 21, 2009 at 7:04 pm

    like part 1 this post really helpful..thanks http://blogfetra.blogspot.com

  12. Vikas SN says:
    May 5, 2009 at 5:00 pm

    Amazing Tutorial buddy. Learnt a lot for it :)

  13. Gaurav says:
    May 13, 2009 at 9:19 am

    Hi Shirls ,Thanks for the great tutorials !!but since i am a newbie to HTML stuff , can you please send me the code of your email widget !Early response will be appreciated!email :- gaurav112in@gmail.com

  14. Shafar says:
    May 13, 2009 at 4:14 pm

    @Gaurav
    Hi Gaurav, check your inbox..

  15. Blog O Directory says:
    June 7, 2009 at 7:57 pm

    Great tip, check out an example customized feedburner email subscription box:http://www.mates101.comThanks,Mates 101

  16. Shafar says:
    June 8, 2009 at 5:50 pm

    @Blog O Directory
    Cool! :)

  17. Urban Samurai says:
    June 14, 2009 at 11:01 pm

    Great tips! Very useful. Really like your site, by the way. Good sound practical advice. Keep up the good work!

  18. Sid says:
    July 20, 2009 at 8:27 pm

    hi shafar,Gr8 post!! bookmarked u n subscribed too..will link to ur post in some post..its the best i hv seen anywhere to customize feedburner code..Thanks Again!!

  19. Tomaz says:
    July 25, 2009 at 6:00 pm

    Awesome.

  20. sbunting108 says:
    October 10, 2009 at 6:04 pm

    Nice tips I was looking how to change the default boring feedburner subscription box!

  21. URDUSMS says:
    April 7, 2010 at 10:25 am

    Thanks, I want to ask is it legal to remove delivered by feedburner watermark?

  22. Shafar@TipsBlogger says:
    April 12, 2010 at 5:54 pm

    @URDUSMS
    If it's illegal, almost all bloggers including the 'professional bloggers' would be caught!

  23. Vic says:
    October 26, 2010 at 8:56 am

    Great tip. I don’t know that feedburner, although free, can be edited to suit our needs. Feedburner is really cool and most importantly, it is free.

  24. Obaidul Huq says:
    March 13, 2011 at 1:55 pm

    Thank u for blogging help

  25. Valpo Creative says:
    June 24, 2011 at 5:16 am

    Major props, awesome tips. I just added subscription to my blog, bef I saw the default layout & was lucky enough to land here.

  26. Minhal Mehdi says:
    August 26, 2011 at 5:08 pm

    How Can We Chnage Border Colour of Box ??? i saw a black border on the box

  27. Shafar says:
    August 28, 2011 at 10:40 am

    @Minhal Mehdi
    You can change the border line width and color of your choice by tweaking the code given at the beginning of the form.
    (border:1px solid #ccc)

  28. Rasel Rony says:
    January 15, 2012 at 7:29 pm

    thanks a lot, I’ve customized the subscription box according to your way

  29. shafira says:
    January 16, 2012 at 8:03 pm

    It very helpful for me. … This is really great blog, I always find worth reading stuff here. Thanks

  30. BJ says:
    February 23, 2012 at 4:37 am

    Great tutorial. How do I increase the space between my subscribe button and the email text box?

    I am using Thesis. How would changing my subscribe button on your last step differ?

    Thanks!

  31. Shafar says:
    February 26, 2012 at 5:52 pm

    @BJ
    Just use ‘br’ tags for spacing.

Leave a Reply