Customize Feedburner by Adding Background Image and Color

One thing that i want to share for today post is how to make your subscribe email become more beautiful by adding some color as well as background picture. This is great for improving your blog appearance. Considering a Blog design is one of important part bacause people always look at your design before they decide whether they are subscribing or not in stead of rich content. OK, let's begin to do a Blog tutorial for modifying sunscribe email. The famous subscribe tool like feedburner always be used by webmaster (if you have not register yet to feedburner, read my last article here). We are gonna learn 4 simple steps below:

STEP 1 Change Background Color

• Firstly, the original feedburner code will look like below:

<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=Your Feed ID', '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="Your Feed ID" 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>

• All you have to do is to find the code below:

text-align:center

• Then add script ;background:#00CCFF;"  

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


STEP 2 Add a Background Image

• find the code below

text-align:center;background:

• Add the following script something like this url(http://www.example.com/image.jpg);" 

 <form style="border:1px solid #ccc;padding:3px;text-align:<br /> center;background: url(http://www.example.com/image.jpg);"



STEP 3 Change The Width Of the Textbox

• Change the width with any number pixel and try more until suit with your Blog width:140px (change the red color)

 <input type="text" style="width:140px" name="email"/>

• If you want to change the height of the textbox just simply change height:20px (change the red color)

 <input type="text" style="width:140px;height:20px;" name="email"/>



STEP 4 Remove "Delivery by Feedburner" Link

• you need to find the script below and remove it 

<p>Delivered by <a href=http://feedburner.google.comtarget="_blank"><br /> FeedBurner</a></p>