UndeniableProfits.com » FeedBurner http://www.undeniableprofits.com Just another WordPress site Sat, 07 Apr 2012 17:13:22 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 FeedBurner Email Subscription Form Gets A Facelift http://www.undeniableprofits.com/feedburner-email-subscription-form-gets-a-facelift/ http://www.undeniableprofits.com/feedburner-email-subscription-form-gets-a-facelift/#comments Sat, 09 Jan 2010 13:39:31 +0000 admin http://www.undeniableprofits.com/?p=372
Are you using FeedBurner email subscription service for your blog or website? Are you happy with the design of the original email subscription form shown below? Does it really blends well with your blog theme or webpage template?

FeedBurner Email Subscription Form

Do you think it needs a facelift? Yes, I personally think so. If you think the same as me, please read on as I’m going to show you how to facelift your FeedBurner Email Subscription Form in 5 easy steps.

Here, I assume you already knew where and how to copy and paste the original subscription form code into your blog. If you are not sure, please let me know.

Below is my sample code. Please don’t copy it to your blog unless you want your readers to subscribe to my feed which I don’t mind!

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=UndeniableProfits', '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="UndeniableProfits" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

 

Step #1: Set Form Width

If you want to set the Form Width to size, say 300, just add the following code to the <form style="…"> tag.

width:300;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;">

 

Step #2: Add Background Color

If you want the FeedBurner email subscription form to have a background color, say your favorite color code is #F4F4F4, then just add the following code to the <form style="…"> tag.

background-color:#F4F4F4;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;">

and the form will look like this…

FeedBurner Email Subscription Form

If you need a free color picker software that you can simply point the mouse cursor anywhere on the screen and tell you the color code, I would recommend ColorPic.

Step #3: Add Background Image

If you think you need a Background Image for the form, again just add the following code to the <form style="…"> tag.

background-image:url('IMAGE URL');

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');">

Let’s see how the form will look like if I use image below as the background image.

Background Image of Feedburner Email Subscription Form

Now, the form is being filled with the background image… but with repeated images.

FeedBurner Subscription Form

Step #4: Set Background Image to “No-Repeat”

If you don’t want the form to be filled up with repeated images, please add the following code to the <form style="…"> tag.

background-repeat:no-repeat;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');background-repeat:no-repeat;">

and the form will look like this…

FeedBurner Email Subscription Form

Step #5: Set Background Image to “Top-Right” Position

Do you think the form will look nicer if I can move the background image to the “Top-Right” position? So, here again I’m going to add the following code to the <form style="…"> tag.

background-position:top right;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');background-repeat:no-repeat;background-position:top right;">

Yeah! FeedBurner Email Subscription Form has just got a facelift! It looks much more better now, isn’t?

FeedBurner Email Subscription Form

FeedBurner
Photo by Lisa Brewster

Have you added your own customized FeedBurner email subscription form to your blog or webpage? Hope you enjoyed!

]]> http://www.undeniableprofits.com/feedburner-email-subscription-form-gets-a-facelift/feed/ 36