SOCIAL SUBSCRIPTION WIDGET FOR BLOGGER

This is Social Subscription widget for Blogger . There are two simple steps to install this widget! Adding CSS code and Widget code!

ADDING THE CSS !

• Firstly Login To Your Blogger Dashboard > Then Choose Your Blog and Click The More Option in Dropdown 
• Then Select Template > Click on Edit HTML > Proceed 
• Then Select Expand Widget Templates Search for ]]></b:skin> and place the below code Before It ! 

  

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
 font-family: 'Oswald', sans-serif;
 margin: 15px 0;
 overflow: hidden;
}
.w2bOldSocial ul li {
 float: left;
 width: 90px;
 padding: 0 0 0 55px !important;
 margin: 0 0 0 5px !important;
 line-height: 48px !important;
}
.w2bOldSocial ul li a {
 font-size: 20px !important;
 text-decoration:none;
 padding:0 !important;
 margin:0 !important;
 text-decoration:none;
}
.w2bOldSocial ul li a:hover {
 text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8-cxPM986fUczqZF3DUqWI88A2I2YX3UKMVPssyjrxB2n3fs0ZF7S0hfZ0x6eJ8wFzaDcf_Uc583Da0Oxmz1FN8SJgFBikdPJydh8VV7NRbJulyxq-4ljSVpj0FjntConr9EAZbT1_hV/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPJGANJroeEQHLf-HL-BdGjmNhxKXfwnd2tW1ae8Zwu0kOtgZgN_bGF_HRPDGdQece2NZVxUXLCNhUyv54PwLujB-gBYjnRuGRaMRqx-QXmgH3srvqq1VJ30FFHdJsMzboY4RrZnHPywz/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2tRA-7FWcP8IZo1fZXBjNIRD5khzJc5rjyYtihqndZYGEThfkfRz9a5AdS46-YalEwA3KiRqTv1FrdSMFDia-obM936gGWjIHAZgs_Uxb7Pq61_IoNW29LShUiOLCdUMJtKyFU8Xe0TA/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmZYAXkpPxz5Sc19o-iCdgHwlHPsi40-knlBJXStRzOhP8W8NdeHsvznJNRGZsr3UKX5TZ9FBhEH13UXTAVjhbcIabKzACohuoQ2ZUNafVGba6OFaWcuXdNXu8HH5iiU1_LvXKWefa4oE/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
 display: block;
 clear: both;
 margin: 10px 0;
}
form.w2bEmailform {
 margin: 20px 0 0;
 display: block;
 clear: both;
}
.emailText {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzq_i6-ZCERuqjndZ-W8BghT_TSXbOLYv88-Poyze6ZbZUoTay4_oWHNS7WiWTZ1jHBiMsyqgnGMlStC9nsOp5pmB5a2YE4rfFZad1bFVoQLxF2vjBRttF7XSb2KjLGnlT_r8Ipk76wsR/s28/w2b-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;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #D3D3D3;
 cursor: pointer;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 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%);
}

ADDING THE WIDGET ! 

• Go To Layout  > Click On Add Gadget on Your Sidebar 
• Choose HTML/JAVASCRIPT Gadget and paste Below Widget Code 

<div class="w2bOldSocial">
 <ul>
  <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
  <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
  <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
  <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
 </ul>
</div>
<div id="w2bEmailsub">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
  <input type="hidden" value="Way2blogging" 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="emailButton" value="SignUp" title='' />
 </form>
</div> 

CUSTOMIZATION ! 

•  http://feeds.feedburner.com/techblog01 With Your Feedburner URL
•  http://feedburner.google.com/fb/a/mailverify?uri=techblog01 Change the Feedburner ID
• http://twitter.com/TECHBLOG6 With Your Twitter URL
• http://facebook.com/techblog01 With Your Facebook Page URL
• <input type="hidden" value="techblog01" name="uri" />  Change the Feedburner ID With Yours.

THEN SAVE THE GADGET AND YOU ARE ALL SET 

ENJOY !