Today the Email subscription box connects your users and sends updates regularly to subscribers. Not only the users are benefited for this subscription, they revisit the site and keep your site’s traffic level same. The subscription Box should be attractive. It will increase the chances to get Email subscription from your readers. So, first impression will come from eye catchy looks of your Email Subscription Box.
In this Tutorial we teach you that how to customize CSS Feedburner Email Subscription Widget.
How to customize
1. Go to Blogger > Setting > Layout.
2. Click on Add a Gadget and select the HTML / JavaScript Gadget .
3. Now paste the below code on the content area.
/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eHOLgL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p class="text1">JOIN 2000+ Subscribers</p><p class="text1">Get Free Uddates </p><p><input class="emailbox" type="text" name="email"/></p><input type="hidden" value="blogspot/eHOLgL" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class ="button" type="submit" value="Subscribe" />
<div id="navcontainer">
<ul>
<li><a href="https://plus.google.com/+problogginghubcom" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79bb2AVg93ZQFbrPxompc34tRp6yj5YJvG8qkJ5r-Nds3OvXmsasHOl5wjUFXEJQZdBH5qfPAXJS5FFAy1lEwe3ohHykrIcOLLURkskIAdpSCNHHU85xt7h5EQczMEZmbEkbskjfJ-g/s1600/Google+.jpeg" width="30px"/></a></li>
<li><a href="http://twitter.com/Problogginghub/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQNnW4uNBlSq0am92cGi505VH_CP-3FKkBPgIadje7XniqrcAmh2y5jOax8NJC1uIz_VIHpwE0-5ZcFXM5Dr2sZpfUO_lyFoTIThR3wz2u0jUESVB0TgMvHm1kvWC5IqAMqKcPl9dpA/s1600/Facebook.jpeg" width="30px"/></a></li>
<li><a href="http://twitter.com/Problogginghub/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8kG0aRwwlshi0RzTOMhyphenhyphen9a4Nk8S-V5A_cDc-MMFQ1OO9U8zY1Q6xyCt7LpWDsYMuLmL81vZaJfyhAiPAUEFNQLxpjIZduZvijhekPLxIzJySXuTofwrNwVMlcjb8yeUgo7KTPLP6zQ/s1600/Twitter.jpeg" width="30px"/></a></li>
<li><a href="http://www.pinterest.com/problogginghub" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWdt4xAXSRdgineumwEC3v-uE_6tLJ2C-xNt2UJPYVrRi6JELGmBqAJWGTMj8oeERvQoTZlFLKF9UxgsExEnYV8uwMft0WVtHkPA69nBgNfAIcnWh57j2jbo3Oa7TykSYRbZYzIKCHQ/s1600/Pinterset.jpeg" width="30px"/></a></li>
</ul>
</div>
</form>
<style type='text/css'>
form {padding:10px ; border:4px dashed #ccc;padding:3px;text-align:center;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; }
.text1{ font:23px bold; font-family:calibri; color:#E3A20B;}
.emailbox{ font :20px calibri; width:250px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding : 0px 5px 0px 5px }
.button { width:100px; height:30px; Background-color:#E3A20B;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; font:17px bold calibri}
#navcontainer ul
{
margin: 0;
padding: 10px 0px 10px 0px;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
</style>
4. save the Gadget.