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

How To Add One Time Popup Email Subscription Widget For Blogger

On By // 92 comments
Advertisement
One Time Popup Email Subscription Widget For Blogger
Last Time we published How To Add Pop Up Email Subscription Form For Blogger Using Jquery. As I mentioned in the last post now we are going to see How To Add One Time Popup Email Subscription Widget For Blogger. This is a jQuery widget. this is the upgraded version of the previous widget. In the older version widget will open when the email icon is clicked but this widget makes the popup automatically and the popup will shown only once in a week. Now we can see How To Add The One Time Popup Email Subscription Widget For Blogger.

live demo:-

Add One Time Popup Email Subscription Widget

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.
Ignore this Step, If your Blog already have a 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 One Time Popup Email Subscription widget to your blog.
  1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
  2. Paste this code inside it.
    <style>
    #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }
    #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
    #popupContactClose{    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;    text-indent: -99999px;}
    #description {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }
    #description img {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }
    #btntfollowForm {  padding: 15px; }
    #btntfollowForm img {  border:none; }
    #btntfollowForm p {  margin: 0 0 10px;}
    #btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        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 {  color:#222;  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="backgroundPopup">
    <div id="popupContact">
    <a href="" id="popupContactClose">x</a>
    <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>
    </div>


    <script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
    </script>
    <script type="text/javascript">
         var popupStatus = 0;
    //this code will load popup with jQuery magic!
    function loadPopup(){
        //loads popup only if it is disabled
        if(popupStatus==0){
            $("#backgroundPopup").fadeIn("slow");
            $("#popupContact").fadeIn("slow");
            popupStatus = 1;
        }
    }

    //This code will disable popup when click on x!
    function disablePopup(){
        //disables popup only if it is enabled
        if(popupStatus==1){
            $("#backgroundPopup").fadeOut("slow");
            $("#popupContact").fadeOut("slow");
            popupStatus = 0;
        }
    }

    //this code will center popup
    function centerPopup(){
        //request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popupContact").height();
        var popupWidth = $("#popupContact").width();
        //centering
        $("#popupContact").css({
            "position": "absolute",
            "top": windowHeight/2-popupHeight/2,
            "left": windowWidth/2-popupWidth/2
        });
        //only need force for IE6 
        $("#backgroundPopup").css({
            "height": windowHeight
        });
     
    }
    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){
        if ($.cookie("anewsletter") != 1) { 
            //centering with css
            centerPopup();
            //load popup
            loadPopup(); 
        }     
        //CLOSING POPUP
        //Click the x event!
        $("#popupContactClose").click(function(){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        });
        //Press Escape event!
        $(document).keypress(function(e){
            if(e.keyCode==27 && popupStatus==1){
                disablePopup();
                $.cookie("anewsletter", "1", { expires: 7 });
            }
        });
    });
    </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.

I hope you enjoyed this widget. Please share your views about the widget via comments!!! We love to here from you.

92 comments:

  1. nice posting, take facebook tips here http://facebookjocks.blogspot.in

    ReplyDelete
  2. weird, it doesnt work

    check out dustent.blogspot.com

    ReplyDelete
    Replies
    1. Hi Dustin,
      Your blog already have a popup about rewards which is provided by punchtab.

      I think removing the punchtab code from your blog may fix the problem.

      Delete
  3. When I use this it doesn't popup a single time. It does twice. I don't have it doubled up or anything. Did I miss something?

    ReplyDelete
    Replies
    1. It works fine. Please give your blog url then only I help you.

      Delete
  4. Looks great but I cannot get it to work!! http://2-oxford-masters.blogspot.tw/ Can you help at all?

    ReplyDelete
    Replies
    1. You have two pop up codes in your blog remove all of them and again add the widget using the above procedure.

      Still have problem contact me via contact form.

      Thanks. :)

      Delete
  5. It worked perfectly for me

    ReplyDelete
  6. Thanks for sharing this......i'm going to use this for my website

    ReplyDelete
  7. Thaks to the autor of this site for this information

    ReplyDelete
  8. Wow! This awesome tutorial + full screen background + static welcome page gave me totally freaked effects ;)) no one gonna say it's a blogger ;)

    ReplyDelete
  9. Hey, just used your code, but not sure whether it works fine or not.

    www.studywithebook.blogspot.in

    Please help me as your code looks marvellous but i think it's not working for me.

    ReplyDelete
  10. Thankyou, It was helpful for newsuol.blogspot.com

    ReplyDelete
  11. nice widget for webmaster
    wanna share this great hosting http://rokahost.com

    ReplyDelete
  12. Hi Chan Deep

    I've done as you've instructed but am getting no results - can you check out my blog please? It's http://justinawaite.blogspot.co.uk/

    Thank you for your help.

    Justin

    ReplyDelete
    Replies
    1. Hi Justin,

      Replace the widget code to sidebar then check your blog.

      Thanks for using the widget. :)

      Delete
  13. First i would like to thank the developer. Thank u very much for this awesome code.

    How do i make it appear every time when my visitors try to open new page in my website. It appearing only one time to a visitor.

    ReplyDelete
  14. Thanks for this nice popup page. i will add it soon to my blog.

    ReplyDelete
  15. Its not Working yaar. Please help me

    ReplyDelete
    Replies
    1. Give your site URL Where you placed the widget

      Delete
  16. chann deep i need your template where u used http://chronicl-blogger-template.blogspot.in/ this url else tell me the url where u download

    ReplyDelete
  17. its my gmail id pls send it to me thanks [email protected] waiting for your reply

    ReplyDelete
  18. Not working on my blog..can u help??

    ReplyDelete
  19. Not working on my blog..can u help??

    ReplyDelete
  20. i add feed url of my site but does't work... please help...!!

    ReplyDelete
  21. I'm trying the codes on my testing page but is not working. Please help!!
    http://testingpage23.blogspot.com

    ReplyDelete
    Replies
    1. I just checked your site it's working fine.

      The widget uses cookies so it'll be visible only once in a week.

      if you want to see the widget then remove your browser cookies and see your blog ;)

      Delete
  22. thanks for box is nice

    ReplyDelete
  23. its work, thanks. visit http://www.bloggerawn98.com

    ReplyDelete
  24. How To show the widget Once a day or two?? Thanks.

    ReplyDelete
    Replies
    1. To show the widget only once a day.

      Search for expires: 7 on the above code and change expires: 7 to expires: 1

      Delete
  25. hey there i installed the widget but it seems the subscribe button got cut off and it only says SUB can you help?

    ReplyDelete
  26. How can i change it so it pops up once every 3 days?

    ReplyDelete
    Replies
    1. Search for expires: 7 on the above code and change expires: 7 to expires: 3

      This will make it pop up once every 3 days

      Delete
  27. Hi ChanDeep J,

    I have tried to install this to my blog, but I don't see that it's working. Can you check it out and see if you can find the issue? http://www.prettysweetlife.com/

    Thanks!!

    ReplyDelete
    Replies
    1. It seems everything is fine. Pls try to re-install it.

      This may Fix the Problem.

      Delete
    2. i tried to reinstall as suggested and it's just not working for me.

      Delete
    3. Oh!! Okay, In that Case please contact me with a copy of your theme. I'll check it ^_^

      Delete
  28. It didn't work for me :( Please help
    http://yourcareerlion.blogspot.com

    ReplyDelete
    Replies
    1. There is already a popup widget. we can't keep two pop up widgets.

      Delete
    2. well I don't know anything about coding so please elaborate your answer. Which popup widget causing a problem for email subscription box? and how should I remove it?

      Delete
    3. On Widget ID HTML8 you have added a popup widget. Just remove it and add this widget.

      It'll work ;)

      Delete
  29. Thanks for your code chandeep. This is not working for my blog http://checkthisindia.blogspot.in/ can you pl. check & fix it?

    ReplyDelete
  30. It didn't work for me: http://ngozikanwiro.blogspot.com

    pls check, what could be the problem?

    ReplyDelete
  31. help me plz, it does not work in my blog fitnessnwealth.blogspot.com.

    ReplyDelete
  32. really great work but i have important question here
    if i want to put another auto-responder Mailchimp or Aweber
    what i edit in this code ??? i want mail list

    ReplyDelete
  33. Thank you for the above script.

    It is working great on my website. I would like the pop-up to open after 5 seconds. Is there any way to tweak the code and work. Kindly reply.

    Thanks.

    ReplyDelete
  34. Chan Deep thank you for this awesome code. I have been looking for something like this for a while. Would you test that the sign up form works properly by going to my blog and filling out the subscription form. I write a marketing blog called MomentSlater where I help small biz unravel the mysteries of marketing. I just want confirmation it is working through the sign up process. Feel free to sign up and then subscribe. just want to make sure it works. The URL is http://momentslater.blogspot.com/

    Much Thanks, Jeff

    ReplyDelete
  35. Chan Deep thank you for this awesome code. I have been looking for something like this for a while. Would you test that the sign up form works properly by going to my blog and filling out the subscription form. I write a marketing blog called MomentSlater where I help small biz unravel the mysteries of marketing. I just want confirmation it is working through the sign up process. Feel free to sign up and then subscribe. just want to make sure it works. The URL is http://momentslater.blogspot.com/

    Much Thanks, Jeff

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. I liked the article and already used it here ............ http://appkeyszone.blogspot.com

    ReplyDelete
  38. can i integrate this with mailchimp ??

    ReplyDelete
  39. thank you sir ..good work
    www.techmediapak.com

    ReplyDelete
  40. Hi,

    Please help me too.
    I have a template from deluxetemplates.com. It already had this line of code

    "<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"

    You tell us to write this one
    "<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'"

    I changed the html in my initial templete, but the popup is not showing...
    What am I doing wrong?

    My website is www.hr-faq.com

    Thanks a lot,
    Geo

    ReplyDelete
  41. thanks a lot
    check my blog here:
    totodwiarso.com

    ReplyDelete
  42. this is working fine on desktops but in mobile version the box covers whole screen and due to its width there is no option to close it .. any solution for that ?

    ReplyDelete
  43. how would you do this if you no longer had feedburner and decided to start using feedcat.net instead?

    ReplyDelete
  44. Can you check out www.truthinspires.com to find out why it isn't working?

    ReplyDelete
  45. It doesn't just pop up once but many times!!!

    ReplyDelete
  46. That is exactly what I needed for my Excel blog. http://thewizardofexcel.blogspot.com/. Many thanks for such an useful post. Highly recommended.

    ReplyDelete
  47. nice post i tried in my site Http://rajugarivantalu.blogspot.in

    ReplyDelete
  48. many many thanks for this popup coding. thanks u sir very good work

    http://bestshoppingsitelist.blogspot.com

    ReplyDelete
  49. hi how can i change the color of the pop up to suit my blog?

    ReplyDelete
  50. It is no doubt that this subsciption box increase my subscriber. But this subscription box is not adjust with mobile screen. It is appearing on mobile view and not showing close button when a already subscriber revisit to my site.

    Please resolve this issue.

    ReplyDelete
  51. Thank you for the code, but it doesn't work on my blog.
    I removed the cookies and tried again, without success !
    Can you help please.

    http://crochetgazette.blogspot.fr/

    ReplyDelete
  52. Th code was not working well for mobile view of website! It Any help?

    ReplyDelete
  53. HELLP SIR........I WANT TO ADD LIVE BUTTON URL LIKE URS {http://www.blogtipsntricks.com/p/demo.html?url=http://chronicl-blogger-template.blogspot.in/} PLEASE HELP ME...

    MY BLOG URL WWW.DROPDOWNTECH.COM

    ReplyDelete
  54. how can i access that list of mails address i have made it from my blog ???

    ReplyDelete
  55. First Thanks for code...Every thing works fine but only one problem the popup box does not close by itself after some subscribes to my blog.I do not know any coding so please tell me how to do that?

    Thanks in advance

    ReplyDelete
  56. Hi! thanks so much for the code! I installed it and it worked perfectly. But the problem is that it only showed once when I visited my blog just after completing the process. It showed a pop up just like in your demo. But now it is not loading at all. I have visited my blog several times but no pop up appears. Also is it possible to change the color to match with my blog?
    thanks for the help.

    ReplyDelete
  57. Hi,

    how to add or edit time like after 60 sec generate pop up box.

    ReplyDelete
  58. Thanks! Added this to my blog! I DO get annoyed when I visit pages I'm already subscribed to, and they ask me if I want to subscribe! This seems like a nice alternative. Thanks :)

    ReplyDelete
  59. Hey Chan,

    I don't think it's working for me? What did i do wrong.

    http://www.trendingamerican.com

    ReplyDelete
  60. Hello Chandeep! I added the code to my site. Later I tested in responsinator. But this is not responsive. What to do.

    ReplyDelete
  61. Hello,

    Its really a nice widget but its not showing in mobile phone !!!

    Can you please update it :)

    ReplyDelete
  62. It is not working for me !!! My blog url is - http://nxtgeneration1234.blogspot.in/ can u plz fix this ??

    ReplyDelete
  63. hi
    I want to change the appearing time from 1 second to 20 second. what should i do.

    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