Awesome Feedburner Newsletter Subscribe Box Widget

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/AVvXsEhm-Gd70y61DpNu4foCugjxXzrpgzqlGgezH8qOlyPJIBRWC5IKhRAzuzNyX68GgT08qF3TNoUG9aiFOl_TQmNSibB2SoMhZFsuc7buQrnAX0NatYqSOvtFLa_JeRoNb_vbM3qvksfAaCXA/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/AVvXsEiKM0agiI5sck1MlTImwES3ofJw1PgXN5xPpHXYRdJbeKe7N1W7Zfj79sWy7rJHFn6ejuAoNXntFEfTC98NzaBOEHS8xFyNjnatmc3ZFqPAdLxe0z-5pgPhGxiDYiyrthBr_RetIrnWxSf3/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/AVvXsEjhOCZuilg_hRfXwP1jYgPmAWvgjoBNlvbnc11cj6ikIbY1SBBn7KzL7bMBPVF9C1n42cwRA18-Q8rDjZ0GoFIIs1sn-5xnivWggdVn3PaZwTDiPmnalCBPUCfLZM1px5VTCbfqnQ1cAlHI/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('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/mhisT', '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 !

Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati