Shop Style Social Media Subscribe Box Widget

Shop Style Social Media Subscribe Box Widget
In this tutorial i'm going to explain how to add beautiful shop style social media,Rss and email Subscription widget For your blogger/blogspot website or blog,Follow the steps mentioned below to grab this  beautiful social media Subscription box using CSS and HTML for this.








DEMO


1. Log in to blogger account
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<a href="http://feeds.feedburner.com/bloggersstand" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="http://3.bp.blogspot.com/-sK94EIzryeg/TiGSrGeLOFI/AAAAAAAAAB4/PPMKclGxbGU/s400/Untitled-5.png" width="290" /></a>
<style>
.mbtips-email{
background:Fff no-repeat 0px 12px ;
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.mbtips-emailsubmit{
background:#0084CE;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font:12px sans-serif;
}
.mbtips-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:0px 2px 0px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<style class="text/css">
.center
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
</div>
<div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="bloggersstand" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 300px;
margin:10px 0 0 15px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alphaundefinedopacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alphaundefinedopacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-6j39---6ijA/UBk8saCpwtI/AAAAAAAABC4/Lo2gOTv8TdU/s1600/bloggertrix.com-Facebook.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-7fDCZ_0D-r0/UBk8t9SbWKI/AAAAAAAABDI/vYB6Phmi6KU/s1600/bloggertrix.com-twitter.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-CfxYPVDVyi0/UBk8tLVMG5I/AAAAAAAABDA/Lv595wWhu4Y/s1600/bloggertrix.com-rss.png" /></a></div></td>
<td><a class="Fadeout" href="https://youtube.com/username" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-UlYHi6TM8_k/UBk8u2Gof-I/AAAAAAAABDQ/uplI_Tk_uwY/s1600/bloggertrix.com-youtube.png" /></a></td>
</tr></table>
</div>

  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your twitter username.
  • Change bloggersstand with your Rss Feed username.
  • Change Username with your  Youtube username.

5.Now Save Your Template...Done !