Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

How To Add Pop Up Email Subscription Form For Blogger Using Jquery

On By // 18 comments
Advertisement
Update: Now I've published a newer version of this widget, which is fast loading and only uses CSS3 and HTML5 (No Jquery), You can check it out by clicking the following link. ;)
Popup Email Subscription Widget for Blogger using CSS3 and HTML5
Pop Up Email Subscription Form
Pop Up Email Subscription Form For Blogger is a blogger widget using jquery. In this widget the form is created by css3 with a auto check feature and the pop up is created using jQuery. We hope this form helps you to increase your blog readers. Now we can see how to Add The Add Pop Up Email Subscription Form For Your blog. Before that you need to see a live demo for better understanding what we are talking about.you can see the live demo by clicking the floating email icon on the left side of the demo page.
live demo:-

Add Pop Up Email Subscription Form For Blogger

Adding jQuery plugin to the template:

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
  • Add the below line of code before </head> tag.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Adding Widget Code to blogger

These steps are to add the Pop Up Email Subscription widget to your blog.
  1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
  2. Paste this code inside it.
    <style type="text/css">
    #subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
    #subscribe-widget { display:none; }
    /* Overlay */
    #btnt-overlay { background-color:#000; }
    /* Container */
    #btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
    #btnt-container .btnt-data { padding:8px; }
    #btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
    #description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
    #description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
    #btntfollowForm { padding: 15px; }
    #btntfollowForm p { margin: 0 0 10px; }
    #btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
    #btntfollowForm input:not([type="checkbox"]):active,
    #btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
    #btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
    #btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
    #btntfollowForm .button input:active,
    #btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
    .btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
    .btntFollowFooter a { color: #222; text-decoration: none; }
    .btntFollowFooter a:hover { color: #fff; }
    <!--[if lt IE 7]>
    #btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG',sizingMethod='scale'); }
    #btntfollowForm  input{ padding: 10px 5px 10px 32px; width: 93%; }
    #btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0; }
    <![endif]-->
    </style>
    <div id="subscribe-button">
    <a class="subscribe" href="#"><img src="http://3.bp.blogspot.com/-qY19_y5JjHo/U3Iv9Q8Wd-I/AAAAAAAADAQ/-ul9xWAsxFg/s1600/trigger-mail-icon.png" alt="subscribe" /></a></div>
    <div id="subscribe-widget">
    <div id="btntfollowForm">
    <img alt="Subscribe" border="0" float="center" src="http://2.bp.blogspot.com/-74BRtm82chU/U3IkWoqLESI/AAAAAAAAC_k/Fl5GWfxK84o/s1600/Subscribe+Via+Email.PNG" />
    <div id='description'>
    <img alt="email" border="0" src="http://1.bp.blogspot.com/-MtuD6J3TCkU/U3IlM3m2t_I/AAAAAAAAC_s/mT_YKzqTw54/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chandeepsblogtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="chandeepsblogtips" /><input name="loc" type="hidden" value="en_US" />
    <div class="button">
    <input type="submit" value="Subscribe" /></div>
    </form>
    </div>
    <div class="btntFollowFooter">
    Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>
    </div>
    <script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    jQuery(function ($) {
        // Load dialog on page load
        //$('#subscribe-widget').modal();

        // Load dialog on click
        $('#subscribe-button .subscribe').click(function (e) {
            $('#subscribe-widget').modal();

            return false;
        });
    });
    </script>
  3. Replace the code highlighted above with your feedburner username .
    The username for your feed can be found at the end of your feed URL.For example our feedburner URL is http://feeds.feedburner.com/chandeepsblogtips , with chandeepsblogtips as the username.
  4. Now save the widget and view your blog. The widget trigger icon is placed in the left side of your blog.
I hope this widget really help you to increase your blog readers.Very soon I will release an another widget based on this style with the one time pop up feature.So stay tuned by subscribing to our blog. Feel free to share your opinion about this widget through comments. Thanks for visiting.

18 comments:

  1. nice job

    check out it

    www.teqnofox.co.cc

    ReplyDelete
  2. please add a facebook like button with this widget

    ReplyDelete
  3. realy good tips, I also would lke to share more on my blog http://oyaah.blogspot.in

    ReplyDelete
  4. My site slider s not working when i used jQuery dono why can u fix this..

    ReplyDelete
  5. nice Widget ThanQ Admin.. :)
    http://www.tipstricksisland.com

    ReplyDelete
  6. I do not want to pop-up this box for every page refresh , i want it to appear once in 3 days or once in 7 days , is that possible , If yes then how
    Thanks in Advance

    ReplyDelete
    Replies
    1. Then check this widget http://www.blogtipsntricks.com/2012/06/how-to-add-one-time-popup-email.html ;)

      Delete
  7. Thank you!! best widget I've found!!

    ReplyDelete
  8. How can i use this popup if i allready have subscribe button?

    ReplyDelete
  9. NICE ........................

    ReplyDelete
  10. i wonder what i'm doing wrong but it doesn't seem to work on my blog :(
    www.pisoandbeyond.com

    ReplyDelete
  11. NICE POST http://www.clubsideeffects.com

    ReplyDelete
  12. Been looking for something like this, and so far was unsatisfied. Hope it encourages more subscribers. Thank you so much!

    http://www.craftyhooahmommy.blogspot.com

    ReplyDelete
  13. It is working fine. But how can I change the text in the pop up window? Also how to reduce the size of the button?

    ReplyDelete
  14. This feature is working fine, but how do I resize this popup automatically in mobile browser. You can check that in my blog : http://gehariharan.com opening in mobile browser.

    Could you please help me with this query?

    ReplyDelete
  15. It is working fine. But how can I change the text in the pop up window? Also how to reduce the size of the button? responsive ?

    ReplyDelete
  16. Thank You,,,For this article...

    ReplyDelete
  17. Bro its good. But when my blog opens in Google translator(English to Telugu) Popup is not closing. Please solve that problem. My blogger name is http://reddypraveenkumar.blogspot.in/

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep