Simple CSS Feedburner Subscribe Box

If you need a very Simple CSS Feedburner Subscribe Box then this is the right post for you.

I have previously written a few posts on Creating Subscribe Box for a WordPress as well as Blogger Platforms.

But the subscribe box which we created was very simple, plain and with no colors.

So in this post what we are going to do is style it up a little bit, and make it look a little better than just plain white box.

Also note that we’re not adding any fancy styles or designs to the subscribe box in this post. What we are going to do is just add simple CSS code to the feed-burner subscribe box.

Given below are codes to different colored Simple Subscribe Boxes –

simple-css-feedburner-subsc

GREEN

[html]

<div style=”background: #6eb800; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

BLUE

[html]

<div style=”background: #00ccff; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

MAGENTA

[html]

<div style=”background: #9900cc; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

RED

[html]

<div style=”background: #ff0000; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

YELLOW

[html]

<div style=”background: #dfb200; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

BLACK

[html]

<div style=”background: #000; padding: 7px 19px 7px; color: #fff; font-weight:bold; text-transform: uppercase; “> <p> Subscribe <p> </div>

<form style=”border:1px solid #ccc;padding:15px;text-align:left;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Codefapcom’, ‘popupwindow’, ‘scrollbars=yes,width=300,height=250’);return true”>

<p> Subscribe to receive new blog posts directly in your Inbox. Enter your email address:</p>

<p style=”padding: 5px;”><span> <input type=”text” style=”width:140px” name=”email”/>
<input type=”hidden” value=”Codefapcom” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/> </span>
<span> <input type=”submit” value=”Subscribe” style=”cursor:pointer;” /> </span></p>

<p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>
</form>

[/html]

3 Comments

  1. otodeluxe

    Thanks alot! Just what I wanted for my blog. Ive not been engaging my visitors since. Thank you so much

    Reply

Leave a Reply