Social Subscription Widget for Blogger and Blogspot

Social Subscription Widget for Blogger. This is another Social Subscription widget for Blogger. If you are my Old reader then you observed in my Old Blogger Template. Today i am giving the Code and How to add the Social Subscription Widget to your Blog.

How to Install Social Subscription Widget ?

There are two simple steps to install this widget! Adding CSS code and Widget code!

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!

4. Done ! 

   @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-left: 55px;
    margin: 0 0 0 5px !important;
    line-height: 48px !important;
   }
   .w2bOldSocial ul li a {
    font-size: 20px !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/AVvXsEjduvL4ChB6Z6lethwdJ7Zx8DptXPR8CXoyN6JXE-U1kXsWNmldlwVCmT1Ir8q0EqEIa1s0SVYYMidOIvzSA-y_qICjpSun6o4pRCccbrcigsJbXVYKOPKj97uOtkuE5GW3eym8yui_-OF8/s48/RSS.png") no-repeat scroll left center transparent;
   }
   .w2bOldSocial ul li.w2bmail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFdWnmtf26EJowmOXCKuJnzWMScvdwlhuHn1aoBXMZV0IN2x4_1nbXSjhv7BMtnWp06qAcleSBNsKjkF8pZ7eHp_Ibo3ytTliwLg-Wq-vuS8pHLFiKC0Cmx0xkru-xJ7wcvo9CzyFbGKi/s48/Mail.png") no-repeat scroll left center transparent;
   }
   .w2bOldSocial ul li.w2btwitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxE-fvLEHsNPArUjhOjqj09r-J9kktJOpUvSuzmsKe5bTWDl19taq5FcroVtiJQuBvT_BEo_-Wo_4k4gx9hK1cIwscceCCPYg40F_mvIDbROKXY4w6W7n5q-cA0HLH-ygWul624qUCB6L_/s48/Twitter2.png") no-repeat scroll left center transparent;
   }
   .w2bOldSocial ul li.w2bfacebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7gcQyGNyizEbLrW0XIb94U9e5iTxjDXty30QK3QS2i8w0di6MEJJ1EXVIZdpr2jUVhKUjnTf1txf_L7WyKgVbBGIVMQupiI9pNBsDZdrM15x__hsWszt_Q6p8TFFJ8NaJDLb1Ff6o9nMs/s48/Facebook.png") no-repeat scroll left center transparent;
   }
   #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/AVvXsEiPuCeXaO9IYIWoEhlO-k305XG8dPG3YzdYYP_M242D1BmD2qFRbQNeW2LmY4sJOBwTdoHCQMGptZQ7MaLowM-0BBETTHxu0Bq-nQosQuLPpuJ94wRtqBkQ8wJiMLOXNvA7wrxE3DS77UKA/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/ritrosoft">RSS</a></li>
     <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=ritrosoft" >Email</a></li>
     <li class="w2btwitter"><a href="http://twitter.com/ritrosoft">Twitter</a></li>
     <li class="w2bfacebook"><a href="http://facebook.com/ritrosoft">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=ritrosoft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
     <input type="hidden" value="ritrosoft" 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/ritrosoft with your feedburner url
• http://feedburner.google.com/fb/a/mailverify?uri=ritrosoft change the Feedburner ID
• http://twitter.com/ritrosoft with your Twitter URL
• http://facebook.com/ritrosoft with your Facebook Page URL
• <input type="hidden" value="ritrosoft" name="uri" /> change the Feedburner ID with yours.