social subscribe widget most beautiful for blogger

ADDING THE CSS!

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. 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/AVvXsEhztAwgepnvbnkMTniDQ-p8GMYPaPvcZGVMrxz3klOfheYBT31b0XEArq7AsdgaP9E11Mb5DenhQF1AIO1ZGacUNv8zH3xT0meB3Jthm41n6cVL5xltS1zZKL0_JxxUQglveGF6PjDiDSO_/s48/RSS.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2bmail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd-mTvUA9W1lWfzPu8ZYUPWjoCmSf0BPRuSPAXlMHfBMY_K7TA_ZI_d_upkQ_v86XZ3cK118et_FPNK6h1UzNf50Wr7kOA6Mw5vlFy7EzmtkmKmX-kU2n6F1BmygyLs0KUzd4TOZMHQrm/s48/Mail.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2btwitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzg7G2iay3aQltbOobEXDLQDVyt9TwjERy9YMO21dK38q8-C46ZUwVRQo2bZkCjXina5-veI-Fk2V8e6cOtp9qzE7MsAKYcNwcFrXa3J-MVt8Z538jSeS_pZ19e0bA6SdHkW4vspoNxPko/s48/Twitter2.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2bfacebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivXC7s6W5VWJKaizJDwOSJKonQf99eyAsijR62xgQEYRvoqj4xZ3nJflSnXUH_pkY0CNDn9sQFyM4aZIixMW-wyhgLsRC_ciylLop55xRGtkP1Mvkmi8VftUjeiBQekHVBRtVNqBvrZ6r1/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/AVvXsEiX9l16wBcTm8UMgj17urk-6KrSlzA_CCNyDsBIXU5csf8QV_GYyxIxtUHX54lcObpsl76idByA1kubIMoP4-qnMGZt_xBEgkNdd_iwR5O8S-duztSg3XUOmRTxNWSgunEPbs5Vkj61NKrG/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

1. Go to Layout > Click on Add Gadget on your sidebar
2. Choose HTML/JavaScript Gadget and Paste the below Widget Code

   <div class="w2bOldSocial">
    <ul>
     <li class="w2brss"><a href="http://feeds.feedburner.com/chsaqlain">RSS</a></li>
     <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=chsaqlain" >Email</a></li>
     <li class="w2btwitter"><a href="http://twitter.com/chsaqlain">Twitter</a></li>
     <li class="w2bfacebook"><a href="http://facebook.com/chsaqlain">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=chsaqlain', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
     <input type="hidden" value="chsaqlain" 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:-
   After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
• http://feeds.feedburner.com/chsaqlain with your feedburner url
• http://feedburner.google.com/fb/a/mailverify?uri=chsaqlain change the Feedburner ID
• http://twitter.com/Mrchsaqlain with your Twitter URL
• http://facebook.com/Mrchsaqlain with your Facebook Page URL
• <input type="hidden" value="chsaqlain" name="uri" /> change the Feedburner ID with yours.

Get paid to share your links!