Simple Flat UI Email Subscription Widget for Blogger

Almost every blogger knows the importance of Email Subscription widget. Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox. 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 Simple Flat UI Email Subscription Box and it will definitely attract your visitors. This widget has a header, two fields one for the name and the other for email with beautiful icons and hover effects and at the end a beautiful Sign Up button.

Simple Flat UI Email Subscription Widget fot Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Layout and click on Add a Gadget
Step 3. A popup will open scroll down and select HTML/JavaScript gadget from the list of gadgets
Step 4. Now copy the below cod and paste it in the empty widget box
Note:
Our codes can be used for both commercial and personal purposes. Blogger are requested to link back to www.blogolect.blogspot.com if they wish to share this widget with their readers or on their blogs.

<style type='text/css'>
     #blogolect_Subscriber_name{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquS6Hvjsz7kN6mgHhxdsEf7h2GXJETOtamGiHPtiUKv0CRDEIcoMYxrSGvvg-U76OHy_PGjiVuUVH-ppJotCSIqkVksdbjuBnOsRCGt860HRbKuw9ex8C9E1LW7oxsKL4Qx0lSMagwmQ/s1600/name+icon.png) no-repeat center right;}
     #blogolect_Subscriber_email{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbS3QZ8tHjGu-tbdja3Ea7k-w8TItpema-CCytK8AkmYoEUt401UUmWmtohtMp07OOMtznh2xiSn9zCrX6HMscVya-P9wRC_6uEJpTPkSVnLb6f2GYu0v1QK2AQya2mFugjhJEAb9KoI/s1600/email+icon.png) no-repeat center right;}
     #bgt-emailsubs {
      width: 300px;
      height: 265px;
      border: 2px solid #ddd;
      border-radius: 5px 5px 1px 1px;
     }
     #bgt-emailsubs .header {
     background: none ;
     color: #a3a3a3;
     font-size: 28px;
     line-height: 36px;
     padding: 15px 25px;
     font-weight: 700;
     font-family: open sans;
     text-align: center;

     }
   #bgt-emailsubs p {
    font-family: open sans;
    line-height: 26px;
    font-size: 13px;
    color:#333;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #bgt-emailsubs .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #bgt-emailsubs .emailsub .button {
    background: #2aa4cf;
    color: #ddd!important;
    font-weight: bold;
    margin-right: 5%;
    width: 100%;
    border:none;
    outline: none;
    border-bottom: 3px solid #99E4FE;
    transition:background .3s linear;
    cursor:pointer;
   }
   #bgt-emailsubs .emailsub input {
    color: #333;
    width: 92%;
    padding: 10px;
    margin-top: 10px;
    font-family: open sans;
    font-size: 15px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #bgt-emailsubs .emailsub input:focus {
    outline: none;
    box-shadow: 0 0 3px 1px #2aa4cf;
   }
   #bgt-emailsubs .emailsub .button:hover{
background: #1D7290;
   }

     </style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='bgt-emailsubs'>
            <div class='header'>
            Subscribe Now!
            </div>   
            <div class='emailsub'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogolect', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
          <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='';"  type="text" value="Enter Email Address" /><br />
            <input type="hidden" value="blogolect" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="I AM IN !" class="button" type="submit" />

            </form>
            </div>

Replace blogolect with your Feedburner username
Step 5. Click on Save Button
And you're done!

From Editors Desk

Our codes can be used for both commercial and personal purposes. Blogger are requested to link back to www.blogolect.blogspot.com if they wish to share this widget with their readers or on their blogs. Share this widget with your friends and don't forget to subscribe us.

Share This:

Tags:

Widgets

• Prevoius
• Next