Subscription Box for blogger

Gets Updates

How to add this widget

Login to blogger.
Choose your blog.
Go to Layout.
Choose Add gadget.
Choose HTML/JavaScript.
Paste All the below code.
Save

For More Detail how to add widgets Click Here

Copy all the CSS and HTML code and paste on your blog

CSS CODE

<style>
.subscribebtrix {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3));
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
display:inline-block; /* IE is so silly */
border: 0px solid #000000;
border-radius: 5px;
padding: 0px 10px 10px 10px;
width: 310px;
}
.subscribebtrix img {
border: none;
}
.tbimailbox {
width: 270px;
color: #666;
font: 16px 'Trebuchet Ms', Sans-Serif;
padding: 10px 15px;
border: 1px solid #D3D3D3;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button {
width: 300px;
border-top: 1px solid #96d1f8;
background: #0571e6;
background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6));
background: -webkit-linear-gradient(top, #123d60, #0571e6);
background: -moz-linear-gradient(top, #123d60, #0571e6);
background: -ms-linear-gradient(top, #123d60, #0571e6);
background: -o-linear-gradient(top, #123d60, #0571e6);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
display:inline-block; /* IE is so silly */
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: "Verdana", sans-serif;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #123d60;
color: #ccc;
}
.button:active {
border-top-color: #123d60;
background: #123d60;
}
</style>

HTML CODE

<div class="subscribebtrix">
<div align="center" style="color: #333333; font-weight: bold; font: 22px Verdana; margin: 0px 0px 15px 0px; padding: 10px 0 10px;">
Gets Updates</div>
<br />
<br />
<center>
<div style="margin: -30px 0 20px 0;">
<a href="http://www.facebook.com/sites18" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgAYofmiMtJQBCfeU0T-RAJ4H5peiN32SApKpYGbkMjo47A1WPfupTxpdV-dcf16B97kDueBmFhpYazsn5aLjlTh0GFQ3bXxWyO5X-N7H0_4mjnx4P4l5lBw9rypw4tRDlY1wNO7pxPy-/s1600/facebookicon.png" /></a>
<a href="http://www.twitter.com/sites18" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfZeixFA9muEl-bjRwtQm_L8c5RnzyLpoXdg1vzrydvSt9K2hs-MGtk8yZvRMQCCKReQjviaCvnOF7NyYxv5yFV9oENlBt8cJaVa_stTi58inBWvNAktTnUF5mT2ibLUmgCRStz1u-gDc/s1600/twitter.png" /></a>
<a href="https://plus.google.com/111017048615442636299" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8rXwVh9_sri7C6N2iLgBQ4BGGkUVDYOcAqsQTuY6INnhpwo9jglREm_wq_uiAvbC_gDhb-EHgZCLkLSzUUsOAvSjVsTX46boFLOm-UFCNKcR5R-xR8s_rhbacLjXhX1EEZV6tNt3hE-J/s1600/google-plus-icon.png" /></a>
<a href="http://www.pinterest.com/sites18" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAJINovMdU5Vxo_qFZzdf7AmFWs8QirIoYc8xUDZhDKAjZjS8CRLFnokudfuaAYPbnIGQldB4Qfk9-A0R7hl5Ixckatlqemg4MAT_7l_GBL1SLzaGmrkT9NbYItiMLmEzirCpxwsIR6pf/s1600/pinteresticon.png" /></a>
<a href="http://feeds2.feedburner.com/sites18" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJicZUi_q-tD2NPeujdBuIxd4levKXT6ScrKNkwMajFCEVcjTdil4iTwqt3wJTOx4ygnow9wkCdwUU9Ilj9iZxE9Trlz3cURfWGQKQpHPAa98AFE9Ti-SYNG70TVEtuJRk-M4Z2veNEzcz/s1600/rssicon.png" /></a>
</div>
</center>
</div>

Note: Change all the green text with your own Social profile
.
If you have not all Social profile and you want to add some button then simply remove that line
For Example: Suppose you have no feedbuner id then remove...