Awesome Sidebar Feedburner Email Subscription Form For Blogger and Wordpress Blogs

While doing some research for awesome opt-in-forms last week, I stumbled on an attractive Feedburner Email Subscription Form. I copied its code from the blog post, made some changes to the code and embedded it on the footer of my blog. I am enjoying it now and I have decided to share it with you.

The Feedburner Email Subscription Form can be placed on the sidebar, footer of your Blogger and Wordpress blogs. Note that sidebar is more recommended.

Without wasting time just follow the below instruction to add it to your blog……

All you need to do is to edit the code below, copy and paste it in HTML/Javascript gadget of a Blogger blog or Text widget of a Wordpress blog.

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css"></link>
<div id="Subscription">
<div class="heading">
Sign Up in Seconds</div>
Sign up with your email address to receive latest updates straight in your inbox.
<div class="emailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri= DelsublogEmpoweringTheWorld', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Your Email" type="text" /><input name="uri" type="hidden" value="DelsublogEmpoweringTheWorld" /><input name="loc" type="hidden" value="en_US" /><input class="button" type="submit" value="Sign Up Now!" />
</form>
</div>
</div>
<style type="text/css">
#Subscription { width: 300px; height: 200px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }
#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }
#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }
#Subscription .emailsub { padding: 0px 20px 10px 20px; }
#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }
#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }
#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }
#Subscription .emailsub .button:hover{background: #DD7761;}
#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}
</style>

You can customize as desired if you have basic knowledge of html and css.

Make sure you carefully REPLACE the "DelsublogEmpoweringTheWorld" in the code with your blog feedburner ID. You can get it via feedburner.com. Click on your feed, and then click on "edit feed details". It will be displayed as seen in the screenshot below: 

If you don’t know how to copy and paste codes in HTML/Javascript gadget of a Blogger blog, then read this recommended post: How to add label widget to blogger blog and How to insert floating sharing bar on blogger blog

What’s your say on this?

Kindly let us know via the comment box below.

Make sure you Subscribe Now to our feed so you won’t miss our next post.

Please don’t just read alone, LIKE and SHARE this with your friends via the like and share  buttons.

Buy Emma a drink with PAYPAL if you like this post.

Like Our Facebook Page: