Add Stylish Subscribe Box To Blogger

Today we going to show you how to add stylish subscribe box for bloger. A subscription box mean a link to your RSS feeds and a email form, where reader's can submit their email id to get mail updates from your blog. This subscribe box with rss, google+, twitter, facebook, feedburner. When reader's look a simple subscribe box, they will not subscribe. But this subscribe box with attractive and awesome look, so blog reader's will subscribe, sure.
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.

Live Demo

First Method:
1. Click Add to Blogger button to add this subscribe box very easily.

Second Method:
1. Blogger Dashboard → Design → Edit HTML.
2. Find </head> tag and add following code before it.

<style type='text/css'>
.sub-box{
width: 270px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41lLo4Tw5mVCE8hOXQk1y7Y7mZXE9__ixweSSW2rSMZUQ2G7aiireotm8osqSxK5hAUuQVkyITgpfxNur4o6jM_zilqbJR7AMWf_WSaA8l-eSUMAQHBpkGTz97O-LDojRtOA9ZTotaNw1/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IQFk2dj3TDJcI90wqWF7FNT7ZAawW34CUe9TYnr-7ciVpHxffz9bxAJWA9fOEW96ef9rJdRDIB8BDODt0srre4EHkcfH2v5j7Bw-aDiPi2Wo1aZrpStpbcExTYcB2cJZpp5xVzt5OfHa/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWMcAWKxQWpiTpqWnDIQJHmMSd32LeZnBLHPxghXzICXOuV_a9YWPUHg6qcMYtmeCsE2_EfTVcgE3aCgrg-y5wg6SiNUBjt-amoMe2jRrLVFrtIjDiVA3RH4DQMmPljLzo7co3yOc6Dkv/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVlqlFp4gitjgXio-mXZkrXBKoEucjhrm2d7d6bzdyLp2GfG9-cNvKxmGK4utssPMW2oba1UnMVFPU5_xq4F5JnoZe89jNARx3zRJMC7A0jYHLkcFV5u5qimXdbwxUdLRkBiyb1S9yVh-/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_iD5Mv8Rfmkvb3QInNEW0exnbVZ5-M-7NWOHxOnNhAvA6vqO6tc5LxAW3raPTHg62zmaDIhaIRTaiTT8Lsibxll-BAJlXVxDgE7L4YkD0a1vedfUtPYQ_7OMoTQtEe9wrRoP5SodltdD7/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 class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/onlinetrick'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='http://plus.google.com/114636838169087641091'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/onlinetrick'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/onlinetrick'>Facebook</a></li>
</ul>
</div>
<br />
<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=onlinetrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="onlinetrick" 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="SignUp" title='' alt='' />
</form>
</div>
</div>

Customize.
Highlighted in red 
Replace http://feeds.feedburner.com/onlinetrick with your Feedburner link. in red
Replace http://plus.google.com/114636838169087641091 with your google plus page link.
Replace http://twitter.com/onlinetrick with your twitter link.
Replace http://www.facebook.com/onlinetrick with your facebook page link.
Replace onlinetrick with your feedburner name in two terms.

SHARE

Tweet