Awesome Feedburner Newsletter Subscribe Box Widget

I earlier posted many newsletter subscription box widgets for blogger blog, that you can use on your blog on different parts to gather more and more subscribers. But today I am posting subscribe box widget that I designed personally for my own website, well this one looks clean, simple and use nothing but few images and the work of CSS. So you can already see the box in the image on the right.

So now using this box you can easily get more readers to subscribe to your Feedburner newsletter which will automatically deliver every post you publish on your blog right to their email address. Now just check below steps and add this widget to your blog.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

   #sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQAU9L6qhbPL596uzPHosfwKUDXMTzGNR8xz1uWBKbUyxWDT-REFGTaKlKo9G8CWzbbFC_McjiEn8PpVGCHnImdVw7Lxq_Y6twKVlerp5OQQ3Yna0a5aKcrbnZ3vS1BoIOjbCqUGeYL8L/s1600/colored-strip.png) repeat scroll 0 0 transparent;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZkwipkwk-GwmNZg4OQA1vJ0j_r8uxfeochxQHvZV6ye0aiwufiq9Xn88E8cFA5UQYEUOCiEIC32YI0mRRo-LibhRELxanhumrU5Tsn7zTHuVGW6WHv-J05KhcY7MkKWimktxeJFgdQuf/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9p8cnoSfwiJGIlNX9Gjs60Cg27BblWjl4pUOcw3sj6teJtaIkMv1wG8fKDO44y0BbDzZaFyMX7vWgnGJX3sUWApgQkvJPI-NCX00myPUfcjjEzG-JmgSvkBixi8mYMlRe7o-I6TX06m1K/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}

3. Now visit Blogger > Layout > Add Gadget >HTML/JavaScript.
4. Now add below code into it and Save it.

   <div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=hackinguniversity" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hackinguniversity', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="HackingUniversity" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)" required="required"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

5. You can give it a name but I recommend to leave it blank.
6. Now just change the Feedburner username with your’s & Save it.
7. That’s it now refresh your blog and see this awesome subscribe box rolling !