Flat UI Email Subscription Box For Blogger

Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox . It's important to increase your subscribers list because increasing your subscribers list will increase your traffic and if you want to make some money from your blog so subscribers are important. Bloggers are trying different methods to increase their email subscribers list and one of the best method is to add an Email Subscription Box to your sidebar or anywhere on your blog. We've also shared some of them. Just recently, we've created another Email Subscription widget and on the basis of its design we named it Flat UI Email Subscription Box and it will definitely attract your visitors. This widget has a header, a message just below it and two field one for Name and the other for Subscriber email and at the end a beautiful Sign Up button.

Flat UI Email Subscription Widget For Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy the below code and Paste it in the HTML/JavaScript Widget Box

<div align="center" id="blogolect">
<div id="bgt-subscription" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="blogolect-title-text" style="color: #000000; font-size: 20px;">
Sign Up Now !</h4>
<div id="blogolect-sub-title-txt" style="color: #333333; font-size: 14px;">
Sign Up to Receive Updates Straight in your Inbox</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogolect', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="blogolect_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br />
<input class="email" id="blogolect_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="blogolect" /><input name="loc" type="hidden" value="en_US" /> <input id="blogolect_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access !" /></form>
</div>
</div>
<style>
#bgt-subscription {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;background: #2aa4cf;border-top: 3px solid #F4836A; border-bottom: 3px solid #F4836A;}#bgt-subscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#bgt-subscription input.name {
background: #008080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquS6Hvjsz7kN6mgHhxdsEf7h2GXJETOtamGiHPtiUKv0CRDEIcoMYxrSGvvg-U76OHy_PGjiVuUVH-ppJotCSIqkVksdbjuBnOsRCGt860HRbKuw9ex8C9E1LW7oxsKL4Qx0lSMagwmQ/s1600/name+icon.png) no-repeat center right;}
#bgt-subscription input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#bgt-subscription input.email {background: #008080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbS3QZ8tHjGu-tbdja3Ea7k-w8TItpema-CCytK8AkmYoEUt401UUmWmtohtMp07OOMtznh2xiSn9zCrX6HMscVya-P9wRC_6uEJpTPkSVnLb6f2GYu0v1QK2AQya2mFugjhJEAb9KoI/s1600/email+icon.png) no-repeat center right;}#bgt-subscription input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;box-shadow: 0 0px 0px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#bgt-subscription h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#bgt-subscription input[type="submit"] {background: #008080;border-bottom: 3px solid #59b3b2; !important;color: #d3d3d3;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: 1px 1px #3A060A !important;width: 94% !important;height: auto !important;line-height: 24px !important;}
#bgt-subscription input[type="submit"]:hover {color: #ffffff;}
</style>

Customization :

All you've to do is to Replace Both blogolect with your feed name.

Step 4. Hit the Save Button
That's it :)

From Editors Desk

We've created this free widget for you and we hope you've liked this widget. Give us your feedback, share this widget with your friends and don't forget to subscribe us for other amazing widgets we are going to release soon. Stay tuned :)