How to add Subscription Box Widget in your blog

Adding email subscription box in your blog/ website will increase your visitor to membership.

 To add an email subscription in blogger or any website

Just Copy and Paste The following code inside HTML/JavaScript widget for the subscribe box:

<style>
    #salahuddin-ayubi { 
        border: 0; 
        margin-bottom: 10px; 
        margin: 0 auto; 
            width:300px; 
    } 
  
    #email-news-subscribe .email-box{ 
        padding: 5px 5px; 
        font-family: "Arial","Helvetica",sans-serif; 
       height:38px;}
    #email-news-subscribe .email-box input.email{ 
        background:#FFFFFF; 
        border: 1px solid #dedede; 
        color: #999; 
        padding: 7px 10px 8px 10px; 
        -moz-border-radius: 3px; 
        -webkit-border-radius: 3px; 
        -o-border-radius: 3px; 
        -ms-border-radius: 3px; 
        -khtml-border-radius: 3px; 
        border-radius: 3px; 
        border-image: initial; 
        font-family: "Arial","Helvetica",sans-serif;} 
    #email-news-subscribe .email-box input.email:focus{color:#333}  
  
#email-news-subscribe .email-box input.subscribe{ 
        background: -moz-linear-gradient(center top,#666 0,#333 100%); 
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333)); 
      
        font-family: "Arial","Helvetica",sans-serif; 
        border-radius:3px; 
        -moz-border-radius:3px; 
        -webkit-border-radius:3px; 
        border:1px solid #333; 
        color:white; 
        
        padding:7px 14px; 
        margin-left:3px; 
        font-weight:bold; 
        font-size:12px; 
        cursor:pointer; 
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{ 
      
        background-image:-moz-linear-gradient(top,#333,#666); 
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666)); 
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); 
        outline:0;-moz-box-shadow:0 0 3px #999; 
        -webkit-box-shadow:0 0 3px #999; 
        box-shadow:0 0 3px #999 
     
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); 
        border-radius:3px; 
        -moz-border-radius:3px; 
        -webkit-border-radius:3px; 
        border:1px solid #333; 
        color:#FFFFFF; 
     } 

    #other-social-bar { 
        padding: 0px; 
        overflow: hidden; 
           height:37px; 
         margin-top:-8px; 
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow { 
        float: left; 
        overflow: hidden; 
        padding:5px; 
        width: 270px;}
    #other-social-bar .other-follow ul { 
        list-style: none outside none; 
        padding-left: 4px;}
    #other-social-bar .other-follow li { 
  
        display:inline; 
        border:0; 
      }

    #other-social-bar .other-follow li a { 
        font-size: 12px; 
        color:#666; 
        font-weight: bold; font-family:arial; 
        display:inline; 
        } 
    #other-social-bar .other-follow li.my-rss { 
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeNTRvXARzD7n0l7u8CbWIxsZWSS1RHCEPNIoT1cCUQ8UnUaCgqcIQzSrH-33PNhRxhJ-EZJm9ogLcwr0RxfRw_Ne2EXuaOpGRB8Gtu_0_zM57fOCynCwrf4gbSH1IWR3g0t5qErgX7k/s400/rss-16x16.png') no-repeat transparent; 
        line-height: 1; 
        padding: 0px 3px 1px 20px; 
        width: 60px; 
        margin-bottom:0px; 
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ 
    text-decoration:none; 
    } 
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ 
    text-decoration:underline; 
    } 
    #other-social-bar .other-follow li.my-twitter { 
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMYgQ2vJ_POsSzU7K7vgWHMcatGnxKblII9hUtEb_jNmFK5zafXyr9YuNaADnhPtCRcu6BZJ-WZftDS9RT5B9AG45V9LDni7AQdT3jJHWUJ2LaJehFJDcDGkC9QHLnv2-zOdrkTHdGcw/s400/twitter%2527.png') no-repeat transparent; 
        line-height: 1; 
        padding: 0px 3px 1px 20px; 
        width: 60px; 
        margin-bottom:0px;} 
    #other-social-bar .other-follow li.my-gplus { 
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb58rzQqrH_g-b65XYRRwSJCIFJqrav6cDF3tg_gQlNybpGg9QT-Mx4qZZuD7f5M19wsjxPKoc-RO0bGis50sNllg6B3ar6jxZCkBCyJzFDvj6tEDyh1S5EvsZ6ZaTe5tmU35L2HNSPpc/s400/gplus-16x16.png) no-repeat transparent; 
        line-height: 1; 
        width: 60px; 
        padding: 0px 3px 1px 20px; 
        margin-bottom:0px;}

.emailicon { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2o3Tqy6OrIkgLmMg88AapuORYc1DHsYPMAuwODG441wMn5RkzlanSeKmGTU3S8NWmdyeDsw2hXcshjmedAizFqFjHOJu7MJEL-sVp2F6I0OpKFVfd4GSiI3TBaEHypZBUxnq_h5_zdys/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent; 
     padding: 0px 20px 0px 95px; 
    min-height:100px; 
    margin: 0px; 
    width: 183px; 
    line-height: 20px; 
    vertical-align: middle; 
    font-size: 14px; 
    color: rgb(51, 51, 51);
}

.emailicon p { 
color:#FF8604; 
font-size: 20px; 
font-weight: normal; 
font-family:  impact;  
padding:40 0px 10px 0px; 
margin:0; 
padding-top: 20px; 
line-height: 25px; 
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>
    <!--[if IE]> 
    <style> 
    #email-news-subscribe .email-box input.subscribe{ 
        background: #333; 
        } 
    </style> 
    <![endif]-->
 
<div id="salahuddin-ayubi" >
 
<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />
 
<input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow"> 
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/mybloggertricks"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/1111214334130358474387 target="_blank">Google Plus</a> </li> 
</ul> 
</div>
</div>

Replace tntbystc with your Feedburner title Replace the bolded sections with your twitter and Google+ username details Note: There is also an Email icon in the sharing widget that appears at the bottom of post. To replace its link with your feedburner Email Subscription link kindly find and replace this: (You will find this link inside your template)

http://feedburner.google.com/fb/a/mailverify?uri=TntByStc