Add Stylish Subscribe Box To Blogger

You can add this subscribe box to blogger very easily and simple. Here we added two method, you can select each one. First method by clicking add to blogger button. Second Method by adding css code and html to your blog.
 
1. Blogger Dashboard → Design → Edit HTML.
2. Find </head> tag and add following code before it.

<style type='text/css'>
#social-profiles{
 height:60px;
 text-align:right;
 float:right;
 margin-bottom: 10px;}
#social-profiles img{
 margin-top: 0;
 margin-right: 8px;
 margin-bottom: 0;
 margin-left: 0;}
#social-profiles img:hover{
 opacity:0.8;}
.sub-box{
 width: 290px;
 padding: 5px;
 border: 1px solid #CCC;}
form.emailform{
 display:block;
 clear:both;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 0;}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6KRfveYjyIbNh9VZofcD_mZkr6JLRIaqN_u8ujFjUcuDRSPI0KDVO31uC1XJfZMA4QtyBEsloC4fFTscunq3Bg5x8mCnAonKmNAqERioUqDxDp6Bc96LNjghLXfbFGS5GfsKzqaNyQdBz/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 142px;}
.emailtext:focus{
outline: none;}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);}
</style>

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cabin+Condensed::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

3. Click SAVE TEMPLATE.
4. Go to Design → Add Gadget → HTML/JavaScript.
5. Add following code inside it.

 

 

<div class='sub-box'>
<div id='social-profiles'>
<a href='http://facebook.com/USERNAME' target='_blank' rel='nofollow'><img alt='Facebook' src='http://3.bp.blogspot.com/-DOFQsrJKtAw/T6JTiZx5xUI/AAAAAAAAABs/LmeHk1M0lcA/s1600/facebook_cloud.png'/></a>
<a href='http://twitter.com/USERNAME' target='_blank' rel='nofollow'><img alt='Twitter' src='http://1.bp.blogspot.com/-KeAqwWx9ILI/T6JTtMDciYI/AAAAAAAAACQ/mr_VmiAiWHo/s1600/twitter_cloud.png'/></a>
<a href='https://plus.google.com/G+ID' target='_blank' rel='nofollow'><img alt='Google Plus' src='http://3.bp.blogspot.com/-4MgPKFJoPeI/T6JTsbmF7KI/AAAAAAAAAB4/-OwTppLPUkE/s320/gO_plus.png'/></a>
<a href='http://feeds.feedburner.com/FEEDBURNER ID' target='_blank' rel='nofollow'><img alt='RSS Feed' src='http://2.bp.blogspot.com/-panpNDh8XhE/T6JTshdTMSI/AAAAAAAAACE/72Zl_WELd18/s1600/feed_cloud.png'/></a>
</div>
<br />
<h4 align="left">Get Free Email Upadtes</h4>
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="FEEDBURNER ID" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Submit" title='' alt='' />
</form>
</div>
</div> 

Customize.

Highlighted in red 

Replace http://www.facebook.com/USERNAME with your facebook page link.

Replace http://twitter.com/USERNAME with your twitter link. 

Replace https://plus.google.com/G+ID with your google plus page link.

Replace http://feeds.feedburner.com/FEEDBURNER ID with your Feedburner link. in redReplace RED with your feedburner name in two terms.