Add Popup Email Subscription Box In Blogger

In Last Post We showed our new template store but in this post i will show you how to add a email subscription box in your blog. This is a jquery widget and will help you to get more email subscribers.

Let's Start-

1- Go to blogger dashboard.

2- Then Go To Layout >> Add a Gadget >> HTML/JAVASCRIPT

3- Past This Magical Code In 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:rgbaundefined0, 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:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyg_sCYMNzjaKUtfrJ1JRN4FzhIhyphenhyphenSxaS2i4vJJ-d29_Lo6RjAxon3npPXELn_zGul4g9lEKJ1PNWowBjOX4DaZoe9WjCzForkrBhvFa9fUY7Euh-lchkvuBsXz59yYt7QuJSsxqVg4WpY/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:notundefined[type="checkbox"]){ width: 93%; margin-top: 10px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgbundefined178, 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 rgbaundefined168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgbaundefined168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgbaundefined168, 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:notundefined[type="checkbox"]):active, #btntfollowForm input:notundefined[type="checkbox"]):focus{ border: 1px solid rgbaundefined91, 90, 90, 0.7); background: rgbaundefined238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgbaundefined168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgbaundefined168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgbaundefined168, 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 rgbaundefined0, 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 rgbaundefined0, 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: rgbundefined40, 137, 154); position: relative; top: 1px; border: 1px solid rgbundefined12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgbaundefined0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgbaundefined0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgbaundefined0, 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.AlphaImageLoaderundefinedsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyg_sCYMNzjaKUtfrJ1JRN4FzhIhyphenhyphenSxaS2i4vJJ-d29_Lo6RjAxon3npPXELn_zGul4g9lEKJ1PNWowBjOX4DaZoe9WjCzForkrBhvFa9fUY7Euh-lchkvuBsXz59yYt7QuJSsxqVg4WpY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Q3XNBCkpDL3lM2fCP_hyphenhyphenr1wnW6xLMwl1ViLD-eQ_AmJaW8PLmxknrs9Ny6TmqsV7O2bYAH32UVmEMtzrzYf2wRvP4c7x9W7JgvGstQmU71Lu2C49Ch5o7HRWHKlEkade0cDVzBw2u4_K/s1600/Subscribe+Via+Email.PNG" /> <div id="description"> <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2_snq9JTz0xAO-6nseoMEeaAlZ1Ol2IyRjKa49FUdzDTu7GKTsgUGNx3MpwtIvpKU3UOaASV7BmI7LvKoAx4LLlBHBRIp4xKxT_xzXccxbEZD271sWWWI1Hqzn0Yt6_zDm7jgizFzY43/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.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=yourusername', '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="yourusername" /><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> | Made by <a href="http://www.ngtechzone.blogspot.com/" rel="dofollow" target="_blank">ngtechzone</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 loadPopupundefined){ //loads popup only if it is disabled ifundefinedpopupStatus==0){ $undefined"#backgroundPopup").fadeInundefined"slow"); $undefined"#popupContact").fadeInundefined"slow"); popupStatus = 1; } } //This code will disable popup when click on x! function disablePopupundefined){ //disables popup only if it is enabled ifundefinedpopupStatus==1){ $undefined"#backgroundPopup").fadeOutundefined"slow"); $undefined"#popupContact").fadeOutundefined"slow"); popupStatus = 0; } } //this code will center popup function centerPopupundefined){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $undefined"#popupContact").heightundefined); var popupWidth = $undefined"#popupContact").widthundefined); //centering $undefined"#popupContact").cssundefined{ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $undefined"#backgroundPopup").cssundefined{ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $undefineddocument).readyundefinedfunctionundefined){ if undefined$.cookieundefined"anewsletter") != 1) { //centering with css centerPopupundefined); //load popup loadPopupundefined); } //CLOSING POPUP //Click the x event! $undefined"#popupContactClose").clickundefinedfunctionundefined){ disablePopupundefined); $.cookieundefined"anewsletter", "1", { expires: 7 }); }); //Press Escape event! $undefineddocument).keypressundefinedfunctionundefinede){ ifundefinede.keyCode==27 && popupStatus==1){ disablePopupundefined); $.cookieundefined"anewsletter", "1", { expires: 7 }); } }); }); </script>

Replace The Highlighted Code With Your Feedburner Username. ?