Add Popup Email Subscription Widget with Light Box Effect

This is really a great widget because any viewers can subscribe your blog by simply write own Email address in popup Email widget. It get the best attention of the visitors which makes them so effective in doing their job. A visitors either have to subscribe your blog or click on a cross icon to continue suffering on your blog. If you have quality content on your blog then many viewers will want subscribe your blog, so this widget will be very helpful for you.

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/MakeMoneyOnline72.BlogSpot.png'></img></center> <form id='sub' action="http://feedburner.google.com/fb/a/mailverify?uri=makemoneyonline-72" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=makemoneyonline-72', '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:

* Change the Blog Image/Logo URL in red with your logo url ( you can make this url by uploading image/logo on Google + site )

* 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 :)