Subscription Box for blogger

Gets Updates

    

How to add this widget

1. Login to blogger.
2. Choose your blog.
3. Go to Layout.
4. Choose Add gadget.
5. Choose HTML/JavaScript.
6. Paste All the below code.
7. 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/AVvXsEiJAdNVgOXgAciY6ZS69-oT6jDCu_DcvAKzHXpYJBA-JR8drx6T5-Ud6qIhfvXxj-2yWMMG0_Q8XMj7sXqQLXPRt1ujKnvxt5kPMviNDTKnF9jgyEX4itWCFQqe0bzvJrCQ70LC4Jwz7RCO/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/AVvXsEg-mgTwfc1qiDFPQAqg4DB2BUO-lXvHXrFVjpRC8QW0TSbj9n4xnLbs8_ul1HZY_MF53Unx3RjFzB8cuTHkdZFO_vwPTDUp7HFPRtpwC-x_l1kMlfuUY_cb06-CtMwzwC9oodPsRTkwDVRJ/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/AVvXsEiktwcMfMzuqkZB3oNUN1P1cdOyzaoPk1cvEQPEmmnuAKJQC4nfRt87YhJkpe8j4vdhJ7w5vxyjuaKn8avsKf2B_mus7pscElDbRhwQmUayHxqAVDRnsTUfyyTkkXgx-N7iWcHalml_hBOE/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/AVvXsEhcX_LuQ6iHxsVPT6jmYNrpzl3oTW4ce3-K5RHQQue06cjJ4wLt7Th-m3Hi6Rv2Ir1mQJ6kS8QCYW1dtoShaWKbsBFitEGdly2wjPrCov3iiCgC5i9vIlvvMaRi1YDx9NsMHIdu4CBfeWxz/s1600/pinteresticon.png" /></a>
<a href="http://feeds2.feedburner.com/sites18" rel="nofollow" target="_blank" title="Subscribe toRSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZum_RnmCmDDub8RifOe45rbTbw7v3gGO0Dy9ulol67VgTBAIlwosX25WpLPhsRAoQ1oVVJI2JvIhO6m44RtWuZfXK8lfyn3b1XY_gKz6umhsaFBNM8I4XmUmkRIPCTGtlbu8MRyChVOTU/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...

<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/AVvXsEiZum_RnmCmDDub8RifOe45rbTbw7v3gGO0Dy9ulol67VgTBAIlwosX25WpLPhsRAoQ1oVVJI2JvIhO6m44RtWuZfXK8lfyn3b1XY_gKz6umhsaFBNM8I4XmUmkRIPCTGtlbu8MRyChVOTU/s1600/rssicon.png" /></a>

For Sites

If You have a sites then

1. Copy and paste all the CSS Code and paste before </head> tag.
2. Copy and paste HTML Code before </body> tag.

For Wordpress

1. Login on Wordpress
2. Click on Apperance
3. Go on Widgets
4. Add A text Widget to your Sidebar and paste code in content area.

That's it.

SHARE

Unknown

• 
• 
• 
• 
•