Email Subscription boxes with Popup effects deliver hell lot of better results in-terms of collecting emails subscribers. They get the best attention of a visitor which makes them so effective in doing their job. A visitor either have to subscribe or click a cross (x) icon to continue surfing your content.

Whatever he chooses, that subscription box makes the reader know that you're providing free updates via email.

Just because these popup subscription boxes are so worth using, I have coded a whole new subscription box with popup and lightbox effect.

Pros of Using Popup Subscription boxes:

1. They get the best attention.
2. Spotlights any product you're offering for an subscription.
3. IT GETS MORE SUBSCRIBERS

Cons of Using Popup Subscription Boxes:

1. Could annoy your old and new visitors.
2. Could result in a slight increase in bounce rate.
3. Could make your visitors leave your blog (if you're not creating quality content)


Demo:

     Click the button below to see the subscription box in action.



Note: The code I have provided below will trigger the subscription box when the page has loaded.

Enough chat, now here"s the code!

popup-email-subscription-box-widget-for-blogger

Popup Email Subscription Widget for Blogger:

1. Go to Blogger and login to your account.

2. Select your blog and navigate to the template section of the blog.

3.Click EDIT HTML

4. Press CTRL + F to get the search bar and search for this tag: <body>

5. Replace that tag with this one: <body onload='lightbox_open()'>

6. Now just after the <body onload='lightbox_open()'> tag place the below code

<div id="light"> <div style='position:absolute;left:-20px;top:-20px;text-align:center;font-size:31px;width:40px;height:40px;background-color:white;border:4px solid black;border-radius:100%;color:black;font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif' onClick="lightbox_close();">X</div>  <center><img style='width:400px;height:125px;' src='http://3.bp.blogspot.com/-FYa_loTwsdc/U5E_7MdfdmI/AAAAAAAABDQ/nO2RZVTLlgw/s1600/Eliteblogpress%2B%25282%2529.jpg'></img></center>
<form id='sub' action="http://feedburner.google.com/fb/a/mailverify?uri=eliteblogpress" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Eliteblogpress', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<center> <p style='font-size:35px;margin-bottom:15px;'>Subscribe To Our Mailing List</p> <input class='sbox' id='sbox' type='text' name='uri' placeholder='Your Email Address...'/></center>
<input class='sbutton' id='sbutton' style='border:0; vertical-align: top;' name='upload' type='submit' value='Subscribe'/>
</form>
<center><p style='font-family:Source Sans Pro, sans-serif;' ><b>P.S</b> I will never spam you...100% GUARANTEED!</p></center>
</div>
<div id="fade"></div>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'/>

<style>
input:focus
{
outline: 0.5px solid #4c004c;
}
#sbutton {
padding: 5px;font-size:30px;margin-top:10px;width:500px;margin-left:50px;:font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
background-color:#DFDFDF;}
form { margin:0px;font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
#sbox {
width: 500px;height:30px;vertical-align:bottom;}
#sbox:focus{
border: 1px solid #4c004c;
}
#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: fixed;
    top: 29%;
    left: 29%;
    width: 600px;
    height: 400px;
    margin-left: -150px;
    margin-top: -100px;              
    padding: 10px;
    border: 2px solid #FFF;
    background: white;
    z-index:1002;
    overflow:visible;
}
</style>
<script>


window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}
function lightbox_open(){
 window.scrollTo(0,0);
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
}
function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';


}
</script>
7. Just splash a click on the Save Template icon and enjoy the changes you just made in your blog by reloading your blog.

Customization:

1.Change the blog logo url in RED with your blogs logo url.
2. Change the username in MAGENTA with your blog's feedburner username.

Did it worked?
      Do let me know how this widget is working on your blog. If you're having any trouble with this subscription box then leave your experience down in the comment box below! I'll fix any bugs present in this widget and off-course if you liked it just stay tuned for more :)

Subscribe To Our Mailing List
P.S I will never spam you...100% GUARANTEED!
Was the content worth a share?

18 comments:

  1. Hi. Thank you for posting the tips. We have tried implementing the popup, but it show up for only a fraction of a second on our blog: http://balancebodybosu.blogspot.com/ How can that be remedied? Thanks.

    ReplyDelete
    Replies
    1. I visited your blog and the popup subscription box didn't showed up, perhaps you've removed the code from your template. But did the subscription box gets closed by itself after appearing a few seconds? Is this the bug?

      Delete
    2. I didn't remove the code. So yes that is the problem. Sometimes when I open the blog it appears for a few milliseconds and closes by itself. Other times it doesn't even appear.

      Delete
    3. Hey, thanks for reporting the bug! Can you please send your blog's template on Hamzabutt318@gmail.com so that I see what really is causing the problem. And sorry for the inconvenience.

      Delete
    4. Any luck? I might try another popup.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hey! i tried and it worked, however i was wondering if it's possible to make it only pop up once a day?

    ReplyDelete
  4. Hi.. I love the design of pop up but will it load EVERYTIME a user visits any page ??

    ReplyDelete
  5. it's great but this would be really annoying if it pops every time.. thanks!

    ReplyDelete
  6. Brother I am the author of eminentmuslims.com, can you please tell me how many quality post needed for good traffic on my website

    ReplyDelete
  7. Its not working!
    gives errors when save the template

    ReplyDelete
  8. Not finding the 'body' tag at all in the template. Any other options?

    ReplyDelete
  9. hi...i liked your pop up window for email subscription....is there any option to skip the email verification? the email verification on feedburner everytime i open my post is annoying. You can see it at my blog kindredworld.blogspot.com

    ReplyDelete

Translate

Follow via: