Social Subscription Widget for Blogger

Here’s a social subscription widget tutorial by Harish that you can integrate in your Blogger site. Below are simple steps on how to add it.

• Go to Blogger Dashboard > Template > Edit HTML > Proceed.
• Search for ]]></b:skin>
• Copy and paste code below before ]]></b:skin>

@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("http://2.bp.blogspot.com/-

HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g/Eiju-1UObXU/s48/RSS.png") no-repeat scroll left center 

transparent !important;
}
.w2bOldSocial ul li.w2bmail {
 background: url("http://2.bp.blogspot.com/-

YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c/1fyAl6q9QRw/s48/Mail.png") no-repeat scroll left center 

transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
 background: url("http://3.bp.blogspot.com/-

d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k/0jYlyJGVmXM/s48/Twitter2.png") no-repeat scroll left 

center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
 background: url("http://1.bp.blogspot.com/-

SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y/THAqJLoo_vg/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("http://3.bp.blogspot.com/-

SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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%);
}

• Save.

Note: Always have a backup before editing the template. Change the sample URLs with your own link.