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! 

34 comments:

  1. Wonderful widget brother. Everyone will like this widget. Thanks for sharing. Keep writing. :)

    ReplyDelete
    Replies
    1. THanks For those kind words , Gagan

      Keep Visiting

      Delete
  2. Oh My God !
    What A Beautiful Widget
    Highly Creativ Widget
    THanks For Creating Such A Nice One !

    ReplyDelete
    Replies
    1. WOW , Thanks For Visiting My Blog
      And For The Appreciation

      Keep Visiting

      Delete
  3. Again a very beautiful widget by Blogger Kid
    Very Professional Design
    Thanks Bro !

    ReplyDelete
    Replies
    1. THanks For Making My Widget Fly So High
      Spread the Word, Prasad
      Let everyone know of this widget !

      Keep Visiting

      Delete
  4. Great Share.. Awesome Design you share :-) thanks for sharing

    ReplyDelete
    Replies
    1. THanks For appreciating my hard work , bro
      And , I hope TricksLab is going well

      Keep Visiting

      Delete
  5. Thanks for sharing this.
    I have applied it with some changes at www.dr3vedi.blogspot.com
    Keep it up.

    ReplyDelete
    Replies
    1. THanks For Adding My Widget At Your Website !

      Delete
  6. Thanks for sharing such a great tutorial with all of us. i'll try it later. Keep blogging

    ReplyDelete
    Replies
    1. THanks For those kind word, buddy

      Keep Visiting

      Delete
  7. Awesome Post...And Good Widget. Thanks A LOt..

    From, www.devilspot.in

    ReplyDelete
    Replies
    1. Thanks For the appreciation , Ajay bro

      Keep Visiting

      Delete
  8. very Nice customization buddy keep it up... You know why i said customization instead of creation buddy.... Be unique. Anyways nice job.

    Regard's
    www.skillblogger.com

    ReplyDelete
  9. Thanks for appreciating my hard work , Deep
    Indeed , you are so skilled as your name suggests

    Keep Visiting

    ReplyDelete
  10. i boook mark ur site, i will come back again thankly

    ReplyDelete
  11. lot of thanxx share useful post

    ReplyDelete
  12. Thanks Anil For your valuable comment !

    ReplyDelete
  13. Replies
    1. Yes, I have designed a widget similar to BTNT
      But, Its not cloned . Its designed by me !
      This widget is designed totally by me !

      Delete
    2. Moreover, I have made a lot of changes now ,

      Delete
  14. Hello Rizwan! Please make an tutorial to add sticky notification bar with customizable background. It should be stick in the bottom...

    ReplyDelete
    Replies
    1. Of course, Sohel. It will be my next widget

      Delete
  15. @Rizwan I forgot to mention that it should also include close button (It will look more professional). Thanks for replying my comment.

    ReplyDelete
  16. Awesome Post.. Nice Widget bro :)

    ReplyDelete
    Replies
    1. Thanks Zeeshan, After a long time, you came back :)

      Delete
  17. Hey friends visit the following sites
    trickyhat.blogspot.com
    trickyplay.blogspot.com
    boostweb.blogspot.com

    ReplyDelete
  18. Nice Widget Rizwan. I'm using this widget on my blog- Blogging Easier. Why don't you try me free Review Requester Service. You can Get You Blog Reviewed By Professionals, using the service. We'll also provide you improvement tips for your blog's :
    -Design
    -Contant
    -SEO
    -PageSpeed
    And Much More
    And yeah don't forget the DOFOLLOW backlinks. You'll get free (max 5) Dofollow Backlinks to your blog.
    So just check our service.

    Again Thnk you for this cool widget.
    Happy Blogging!

    ReplyDelete