Note: The code I have provided below will show-up the subscription box when the page has been loaded.
Install Popup Email subscription Box in Blogger:
- Go to Blogger and log-in to your account
- Select your blog and navigate to the "Template" section
- Hit on "Edit HTML" Button
- Click anywhere inside the code and press Ctrl + F to open the search box
- Find <body> tag and replace with the given below code
<body onload='lightbox_open()'>
- Now just after that paste the given 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://lh5.googleusercontent.com/-wsjbg3uaeUU/VLbFISkW_xI/AAAAAAAAAWw/jYnp3D3MLQc/w400-h125-no/Every1Posts.BlogSpot.png'></img></center> <form id='sub' action="http://feedburner.google.com/fb/a/mailverify?uri=Every1POsts" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Every1Posts', '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; 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'; }function lightbox_close(){ document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none';
}</script>
Customization:
* Replace the Feed Burner "User Name" in pink with your Feed Burner User Name
* Now it's complete. Hit on "Save" template button
Recommended: Free Download CustomizeMe SEO Friendly Template
Do let me know how this widget is working on your blog.If you are having any trouble with this subscription box then leave your experience down in the comment section below. I'll fix any bugs present in this widget and off-course if you liked it just stay turned for more :)
Post a Comment
Thanks You For FeddBack! :)