New Stylish email subscription box blogger

This tutorial, will show you how to add A Stylish Email Subscription Box in blogger wordpress and websites.it help user to stay connected with blog

This widget contains links of RSS and an attractive subscription form that will increase the number of your Email subscribers.

 How To Install

1. Next, click on the 'Layout' tab
2.  click on the "Add a Gadget".
3. click on the " HTML/JavaScript".
4. Paste in the code.

<style type="text/css">
/**** subscription popup box start ****/
.textfield{text-transform:capitalize;}
#subscription-pop {padding:10px; background-color:#edefbc;  background-color: rgba(248, 248, 128, 0.4); border: 1px solid #dcdcdc;}
#subscription-pop .title {font-size: 130%; color:#111;}
#subscription-pop .sbutton {background:#FF8E00; border:1px solid #333; cursor:pointer;padding:0 5px;}
.popup{display:none;position:fixed;width:350px;height:263px;z-index:4;font-size:125%;text-align:center;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuQhkCmr0V2YLwvoSx_idFQGEPYu2BQLIqoQ4cdQxflHU1MM-ULMoH4GxTOD9VKkLZnvOAWIF7PueAkdr0EqOftPL6vuD_3puahyphenhyphenaIIGbdeDacAoROFlc9w3DV2Oeu5kGcpNJ8oy2lDzr/s1600/airmail3501.png") no-repeat center !important;margin:0;padding:20px !important;}
.popup h3, .popup .rss-button {display:none;}
.popup #startpoint{padding:0 20px;}
.popup #subscription-pop {background:none !important; border:0px !important;}
.popup #subscription-pop .title {font-size:20px;font-weight:bold;padding:25px 20px 10px;}
.popup .sbutton{margin:10px 10px 20px;margin-bottom:15px\9;}
.popup .textfield{width:250px !important;}
#popupClose{right:5px;top:5px;position:absolute;display:block;cursor:pointer;}
/**** subscription popup box end ****/
</style>



<div id='subscription-pop'>
<h2 class='title'>Subscribe via email for free</h2>
<form target="popupwindow" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=bloggertofree&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input style='width:50%;margin:8px 0;' type="text" placeholder="Email address..." name="email" class="textfield" value="enter email address!" onfocus="if(this.value=='enter email address!'){this.value=''};" onblur="if(this.value==''){this.value='enter email address!';}"/>
<input type="submit" value="Subscribe Now" class="sbutton" />
<input type="hidden" value="bloggertofree" name="uri" />

<input type="hidden" value="en_US" name="loc" />
</form>
<p style='font-size: 85%; line-height: 1.4;color:#333'>Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.</p>
<div class="rss-button" style="padding: 10px 0 0;">
<a href="http://feeds.feedburner.com/bloggertofree" title="Receive free updates via RSS feed" rel='nofollow'><img width="26" height="26" border="" alt="rss button" style="border-width: 0px; display: inline; margin: -3px 6px 0 0;float:left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3z4F5xlYd-hRiTp3xktESgnxkWa8VnJTNBJCbFjWHUKn9Dvgsp-FpFYkZTrQoyYzP8I90raMWtgpqnSGRXr88Ee0oqB889tJBHiKXR3_SM1ViAhFaUUYaksQp_ShgY5e0uG6dS1NsPrw/s1600/rss.png" /><span style="vertical-align:top;">Subscribe via RSS feed</span></a>
<img width="88" style="border:0; margin: -3px 0 0 10px;" alt="suscribe via RSS" src="http://feeds.feedburner.com/~fc/bloggertofree?bg=99cc66&amp;fg=330000&amp;anim=0" height="26" />
</div>
</div>

 Now make these changes,

Now replace http://feedburner.google.com/fb/a/mailverify?uri=bloggertofree
with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

Replace bloggertofree with your feed title.

 Save your widget and view your blog to see it