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.
Note: The code I have provided below will trigger the subscription box when the page has loaded.
Enough chat, now here"s the code!
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 :)
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.
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 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITiCh6L6sxmlsiYnKPmGFj6Yjl65t0tUDCq-vNSfogmAZbN9Kg0-rU3MQ2eGr2gezwJqBPCpxeAYcc4U7KXK0DvYp1bqLWSbKfnHL7rQFKnDE3-XcX-H-HquZ4dBMhzG9_iy145nIauU/s1600/Eliteblogpress+%25282%2529.jpg'></img></center>7. Just splash a click on the Save Template icon and enjoy the changes you just made in your blog by reloading your blog.
<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>
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 :)
X
P.S I will never spam you...100% GUARANTEED!
