Beautiful CSS Email Subscription Widget For Blogger/Blogspot

The Best Way to Reach your Audience is Making Email-Subsciption. You can Automatically Send All your Updates Via Email By Email Subscription Widget.Its Very Easy All you have to do is You have to Make the Visitors to Subscribe to your blog/website. You can make it Simple by Adding Beautiful Email-Subscription Widget on your blog/Website. Here is a Step to Add the Email Subscription widget for your blog/Website.

Step 1: Goto Blogger Dashboard

Step 2: Layout ---> Add a Gadget ----> HTML/JavaScript.

Step 3: Copy and Paste the Below Code On HTML/JavaScript.

Code:

<style type='text/css'>
     #blogolect_Subscriber_name{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicviH_E4Z5cmUSFpokj-7B3pX1c5T6yAQ6UrThppYSFA-M2vuyeC9o2Qp-M_oT7aXQxcUzBxs3JWI5tAGUpUAKP85bMq1NazUqBIPmV7cniKzuJXkSVE0ZJn8Qk_LTSyptt18bXea7NWc/s1600/name+icon.png) no-repeat center right;}
     #blogolect_Subscriber_email{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUN31AMcUEcX_Xi5GB0qwJ-X6fyGoL0YpQBUEjgMyxQwlEujfWHiIIz8-jW8V6ffxHA3txK5u4Jo5ynk7sGR34QZ-nhXMdpxAoHVit44WkII2LgiyJcovMH7KfskE2VAglfDP5TDyCMwc/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=gobloggertricks', '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="gobloggertricks" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="I AM IN !" class="button" type="submit" />

            </form>
            </div>

Step 4: Now Replace gobloggertricks With your Feedburner Username.

Step 5: Click "Save".

Now You Are Done. Visit your Blog/Website to See your Email Subscription Widget.