3/17/2015

Awesome Sidebar Feedburner Email Subscription Form For Blogger and Wordpress Blogs



While googling for awesome opt-in-forms yesterday, 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 sidebar of my blog. I'm loving it and I decided to share it with you.


feedburner email subscription form


You can place the Feedburner Email Subscription Form on the sidebar of your Blogger and Wordpress blogs. 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=secretinfos-ogbongeblog', '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="SecretInfos-Ogbongeblog" /><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.

If your template is responsive, you might have to replace the highlighted "200px" height with "auto" (if the sign up button drops below the form). Same as the width. Just play with it till it gives you desired result.

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



Do you like the email subscription form?


Share :


17 comments:

  1. Yea, I like it. Its cool bro

    ReplyDelete
  2. Thanks bro for this widget.
    I also have a question about adding share buttons below post title in my blog template.
    My template have up to 4 data.body tag and have added it to it all but it aint working

    My blog is www.samex4rill.com

    ReplyDelete
    Replies
    1. Post this on my facebook group so I can easily follow up.

      Delete
  3. This one is more easy to integrate and fanciful than the default feedburner too.... Porting things... Tuale Sir!

    ReplyDelete
    Replies
    1. Yea. looks far better than the default. Enjoy man

      Delete
  4. Thanks for this working fine for me #androidvillaz.com

    ReplyDelete
  5. Wonderfully made and excellent design
    Love to have it implemented in my blog

    Nice one brother......

    ReplyDelete
  6. Thanks jide...its cool on my blog

    ReplyDelete
  7. Wow I love the subscription widget mostly the feature that allows it to popup in a new window.
    Thanks for sharing with us.

    ReplyDelete
  8. Anonymous4/09/2015

    Nice one bro

    ReplyDelete
  9. This is good. really worked fine for me. thanks. see it @cracksloaded.com

    ReplyDelete
  10. look awsome and matured.. switched to it already

    ReplyDelete
  11. Worked perfectly for me

    ReplyDelete
  12. Thank you Jide, I just implemeted it on tasmag.com, I made I little adjust though. I'll be glad if you can check it out

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.