Compass - An Elegant Email Subscription Box Widget

Hi! Everyone . Welcome to the presentation of a new email subscription widget for Blogger. An email subscription box is essential for all the bloggers . It helps us to build a massive email list . A large amount of subscribers means you get a lot more traffic . This widget can definetely increase your email list because of its attention grabbing looks and an elegant design . Many people use Feedburner while many others use Mail Chimp or Mad Mimi. Feedburner is used mainly by blogger users. But, actually its not at all effective. We cant send to our subscribers in Feedburner. Maybe you should migrate to some other feeds managers .We have worked on this widget for some days and we are really happy to announce the release of this widget today . We all need your support for more widgets like this . I am sure that you guys will all love it because its designed in such a way that nobody will hate it . Please do not post this widget anywhere else . The copyright of this widget is owned by me and if you want to share this widget at your blog, then please provide a link back to us . So, now lets discuss the coding and don't forget to see the live demo on the right sidebar! This is a feedburner email subscribtion widget ,so your website/blog should have an account in Feedburner and email subscribtion should be enabled. This widget is the best of its kind !Follow the steps carefully and you get a small and unique email subscription widget for your blog. 

STEPS

1. Go To Blogger - Layout - Add A Gadget
2. Now Select HTML/Javascript
3. Now Copy the coding from here and paste in side the box
4. Save the widget 
5. Hooray, Now you have successfully added This widget to your blog !

Source Codes

<div id="bksubscribers"><div class="bksubscriptionboxtitle"><h4><span class="bkthin">Want To Be</span> <b>Pro Blogger?</b></h4><p>Sign Up With Your Email Address and Get Free Tips To Be Professional Blogger!</p></div><div class="bksubscriptionsingup"><form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( &#39;http://feedburner.google.com/fb/a/mailverify?uri=bloggerkidBK&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'> <input id='bksubscriptionbox' name='email' onblur='if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }' onfocus='if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }' type='text' value='Enter your email address...'/> <input name='uri' type='hidden' value='bloggerkidBK'/> <input name='loc' type='hidden' value='en_US'/> <input id='bksubscribebutton' type='submit' value='Yes, I Want To Be Pro Blogger.'/> </form> </div> <style> .bksubscriptionsingup { padding: 20px; } #bksubscriptionbox { padding: 10px 15px 10px 15px; width: 223px; text-shadow: none; font-size: 16px; color: #666666; margin-bottom: 7px; transition:background 400ms; } #bksubscriptionbox:focus{background:#fff47f;} #bksubscribebutton { background: #E76523; border: none; font-weight: 700; color: #fff; width: 256px; padding: 15px; text-shadow: none; font-size: 15px; cursor: pointer; padding-right: 10px; margin-left: 2px; } .bkthin { text-shadow: none; font-weight: 300; } #bksubscribers { float: left; width: 296px; background: #0091d6; border: 2px solid #03628f; font-family:open sans; } #bkwhatyouget { background: #03628f; padding: 10px; } ul.bkwhatyougetwith li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xqvK6OGcTjkRijnXQldW2X5WlqKqF06XN_yNAFsVy6lj4ZqS2QZJD2vinnFW42fbMuUz_uZ7sKxw0cjhLqtMb4LAltzqJHfjokARqdqa5x3H4p6LiCn_cG7j8RmLc25Z5E9G6XTJ3jU/s1600/checkmarkk.png) no-repeat; margin: 10px; padding-bottom: 10px; text-shadow: none; font-size: 14px; line-height: 20px; text-shadow: none; font-weight: 700; color: #fff; overflow: hidden; padding-left: 25px; } .bkwhatyougetwith ul { margin: 30px 30px 0 25px; padding: 0 0 0 25px; } .bksubscriptionboxtitle { height: 110px; padding: 10px; background: #0091d6; } .bksubscriptionboxtitle p { text-shadow: none; font-size: 14px; padding: 0px; margin: 0px; line-height: 20px; color: #fff; margin-top: 5px; text-align: center; } .bksubscriptionboxtitle h4 { text-shadow: none; font-size: 23px; margin: 0px; padding: 0px; text-align: center; line-height: 25px; color: #fff; padding-top: 15px; padding-bottom: 10px; } </style></div><input id='bksubscriptionbox' name='email' onblur='if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }' onfocus='if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='bloggerkidBK'/><input name='loc' type='hidden' value='en_US'/><input id='bksubscribebutton' type='submit' value='Yes, I Want To Be Pro Blogger.'/></form></div> <style> .bksubscriptionsingup {padding: 20px;} #bksubscriptionbox {padding: 10px 15px 10px 15px;width: 223px;text-shadow: none;font-size: 16px;color: #666666;margin-bottom: 7px;transition:background 400ms;}#bksubscriptionbox:focus{background:#fff47f;}#bksubscribebutton {background: #E76523;border: none;font-weight: 700;color: #fff;width: 256px;padding: 15px;text-shadow: none;font-size: 15px;cursor: pointer;padding-right: 10px;margin-left: 2px;} .bkthin {text-shadow: none;font-weight: 300;} #bksubscribers {float: left;width: 296px;background: #0091d6;border: 2px solid #03628f;font-family:open sans;} #bkwhatyouget {background: #03628f;padding: 10px;} ul.bkwhatyougetwith li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xqvK6OGcTjkRijnXQldW2X5WlqKqF06XN_yNAFsVy6lj4ZqS2QZJD2vinnFW42fbMuUz_uZ7sKxw0cjhLqtMb4LAltzqJHfjokARqdqa5x3H4p6LiCn_cG7j8RmLc25Z5E9G6XTJ3jU/s1600/checkmarkk.png) no-repeat;margin: 10px;padding-bottom: 10px;text-shadow: none;font-size: 14px;line-height: 20px;text-shadow: none;font-weight: 700;color: #fff;overflow: hidden;padding-left: 25px;} .bkwhatyougetwith ul {margin: 30px 30px 0 25px;padding: 0 0 0 25px;} .bksubscriptionboxtitle {height: 110px;padding: 10px;background: #0091d6;} .bksubscriptionboxtitle p {text-shadow: none;font-size: 14px;padding: 0px;margin: 0px;line-height: 20px;color: #fff;margin-top: 5px;text-align: center;} .bksubscriptionboxtitle h4 {text-shadow: none;font-size: 23px;margin: 0px;padding: 0px;text-align: center;line-height: 25px;color: #fff;padding-top: 15px;padding-bottom: 10px;} </style></div>

Change BloggerKidBK with your Feedburner Username 

Final Words

Hope you liked the widget and please express your views about this widget through the comments . Thank you for your precious time and we will soon release an extended version of this widget . Happy Blogging!