Add Awesome Email Subscribe Sliding Popup in Blogger

Would you like to provide your readers with an elegant way to subscribe to your email newsletter updates, well then this new email subscribe box that slides with a style will surely be your first choice, you might have seen this kind of popup box in Wordpress blogs but you can add it to your blogger blog. This uses simple script that slides it from top and even comes with a close button and if reader do not want to subscribe to your updates then he can easily hit that close button to get rid of this box. So now lets see how to add this to your blog.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it. #HU-subscribe-popup{-moz-border-radius:10px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);background:#FEFEFE;border:1px solid #aaa;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.4);color:#111;font:normal Dosis, Georgia, Serif;height:auto;padding:16px;position:fixed!important;top:-1000px;left:40%;margin:0px 0px 0px -182px;z-index:99999}#HU-subscribe-popup a.popup-close{-moz-border-radius:22px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);background:#fff;border:2px solid #333;border-radius:25px;box-shadow:0 1px 2px rgba(0,0,0,0.4);color:#000;cursor:pointer;font:bold 16px Arial, Sans-Serif;line-height:22px;position:absolute;right:-10px;text-align:center;text-decoration:none;top:-10px;width:22px}.subscribers{background:#0091d6;border:2px solid #03628f;float:left;font-family:open sans}.subscriptionboxtitle{background:#0091d6;font-family:verdana;height:53px}.subscriptionboxtitle h4{border-bottom:3px solid #0A5D9E;color:#fff;font-size:23px;line-height:25px;margin:0;padding:15px 0 10px;text-align:center;text-shadow:none}#whatyouget{background:#0B74A5;border-right:2px solid #03628f;float:left;height:203px;padding:10px;width:265px}.subscriptionsingup{background:#0B74A5;color:#fff;float:right;font-family:verdana;height:183px;padding:20px;text-align:center;width:265px}.subscriptionsingup p{margin-top:-10px}.whatyougetwith{float:left;margin-left:-50px;margin-top:-5px}ul.whatyougetwith li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNntUWCQKYSXVa38nMQ-hipe8QRjmbj0YUxwlMYVlx3e8WwJgqtfXTXcURp1t-OaqN7TRSj_niqvFU9wPzWWJKztjMmrCmWM0CNLvR_Fqy7HReoWho0bMwrwu1jq71Tefu826OQQo9i0/s1600/sprites.png) no-repeat -6px -68px;color:#fff;font-family:verdana;font-size:15px;line-height:25px;list-style:none;margin-bottom:10px;overflow:hidden;padding-left:40px;text-shadow:none}#subscriptionbox{color:#666;font-size:16px;margin:-10px 0 10px;padding:10px 15px;text-shadow:none;transition:background 400ms;width:222px}#subscribebutton{background:#F4836A;border:none;color:#fff;cursor:pointer;font-size:15px;font-weight:700;padding:15px;text-shadow:none;width:256px}
   
3. Now again search for </body> tag & paste below code above it. <script type='text/javascript'>$(window).bind(&quot;load&quot;, function() {
   $(&#39;#HU-subscribe-popup&#39;).animate({top:&quot;100px&quot;}, 1000);
   $(&#39;a.popup-close&#39;).click(function() {
   $(this).parent().fadeOut();
   return false;});});</script>
   
4. Now hit Save Template as your CSS & JavaScript's are placed correctly.
5. Now navigate to Blogger > Layout > Add Gadget.
6. Choose HTML/JavaScript Gadget & add below code into it. <div id="HU-subscribe-popup"><div class="subscribers"><div class="subscriptionboxtitle"><h4>Join us & Become <b>Pro Blogger !</b></h4></div><div id="whatyouget"><ul class="whatyougetwith"><li>Get Skilled Knowledge on Making a Professional Blog.</li><li>You step in as a Newbie and Go as a PRO :)</li><li>Step by Step Tutorials will add a finish to your blog.</li></ul></div><div class="subscriptionsingup"><p>Sign Up With Your Email Address and Get Free Tips To Be Professional Blogger!</p><br/><form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Widget-spy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input id="subscriptionbox" name="email" onblur="if ( this.value==&#39;&#39;){this.value=&#39;Enter your email address...&#39;;}" onfocus="if ( this.value==&#39;Enter your email address...&#39;){this.value=&#39;&#39;;}" type="text" value="Enter your email address..."/><input name="uri" type="hidden" value="Widget-spy"/><input name="loc" type="hidden" value="en_US"/><input id="subscribebutton" type="submit" value="Yes, I Want To Be Pro Blogger."/></form></div><a class="popup-close" href="#">×</a></div></div>
   
7. Now just change the blue lines with your username.
8. That's it now Save the gadget and refresh your blog.

So now your widget is ready to get your more loyal subscribers coming daily to your blog, well if your widget is not aligned properly you can change the left property in above CSS marked with blue color and that might fix the problem.