Stylish Email Subscription Widget for your Blog Sidebar

Simplicity is always the best way to attract. So here’s one simple in design yet attractive email subscription box widget for your blog side bar. This beautifully designed widget features a flat ui design and  is  packed amazing effects to make it look interesting. I’m quite sure that you’ll try it out in your blog.
Installing the widget in your blog is simple and easy. Just follow the below instructions to embed it in your blog.

You can also see a live demo of email subscription box widget
Recommended Post : 
  ►Auto Pop Email Subscription Box Widget

Adding the Email Subscription Box to your sidebar

>> go to layout in your blogger dashboard and click on add a gadget and then choose HTML/JavaScript widget.
>> copy the below codes into the widget and save it. simple. that’s it.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
              <div class='heading'>
               Sign Up in Seconds
              </div>
                 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
             <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=Bloggslab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="Bloggslab" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Sign Up Now!" class="button" type="submit" />
              </form>
             </div>
<p id='credits'>Powered By : <a href='http://www.bloggslab.com'>Bloggslab</a></p>
             </div>
<style type='text/css'>
     #byard-emailsubsocial {
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    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;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
     </style>

Notes:
>> replace Bloggslab with your feed burner id.
>>  if you don’t want keep the linkback, just remove the code highlighted in grey. I don't mind!