How To Add Social Subscribtion Buttons To Blogger?

• Share on Twitter
• Share on Facebook
• Share on StumbleUpon
• Share on Delicious
• Share on Digg
• Share This!

In this post I am going to tell you that how to add social subscriber widget to your blog. This is a latest type of social subscriber button. You will like to add this to your blog. The picture shows that how it will appear on your blog where you want to place it. So lets start to add Social Subscriber Widget to your blog.

1: Login to your blog and then go to Design and Edit HTML.

2: Press CTRL+F and paste ]]></b:skin> in it and find the code.

3: Now put the following green code just below this code you searched. And saved it.

@import url("http://fonts.googleapis.com/css?family=Oswald&amp;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/AVvXsEi78BQbHRIHCxjPCbQY5DnjsbZ1_WrYFnbkr4q6Uy2AnA0CJ3Qjpq7eQXU3kiIosp5pr1rZNZmkoI2aFnpER4h08JHgNENjvKqVuBQVPWzGvB3k_Ac32JCUpCAzO15qT8X8ryHQ82wzvpOm/s48/RSS.png") no-repeat scroll left center transparent !important;

}

.w2bOldSocial ul li.w2bmail {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8X7ckoOGRK8MP1YmYg4oZ_4LaurJwWO6T2bOSBdkiQbk9wXH5oR4c2pOHCKyyVYDZfhZ_XrGZE3xsyCuOnofe_118xtyiKmccwgH_b7l_Pz5Mu6jvgspTiQtWtHZ9AMSqgLanwbS4lj_H/s48/Mail.png") no-repeat scroll left center transparent !important;

}

.w2bOldSocial ul li.w2btwitter {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBgT2sljsZUHoAiNB_nm56N_mY3rWoXBtKdhKfPg3XIQdpD-w-HnfXTZ9DmRJC8BjQHP833nQ1lMiyojz3OW1WrgqthYEnSTTMWfDwlOojYjpBeD9qU1YTBHNi6OCeo5KiVlRlsOE2MuF/s48/Twitter2.png") no-repeat scroll left center transparent !important;

}

.w2bOldSocial ul li.w2bfacebook {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgLtohfoBV6EDfDGLx3hBpWt8GVCIhmZD-jcc07LIp1H9zhcp4QvX7GrJ-9t-9DtRGokYje4z75Qb73-Vvcf9_9iWKo-VaZPcbuChuOOJSdDxpceNdcv5ahSDwkNbUUoPSsTSxgIuI_HqM/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/AVvXsEizB-jKlCZDtpH2kqXphJ-CnrLfIwODL-3Xk9oMJ121lG_5Cy1pAqQwULaJSsS_JYPB6_8nf0ip8F27zrbg9qz2HrJnxkx0_4bM2Wl8QLmQ-pCW4RaCXaUPCmdu1JhwBikaZdOieNCu-PHs/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%);

}

4: You have put the basic code in to your HTML and now we will add this to widget box.

5: Go to Design and Layout and click on Add Widget where you want to place this widget.

6: Select HTML/Java Script from the appeared box and put the following green code in to the widget box.

<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>

7: Now save the widge and let do some changes in widget according to your blog.

Replace all red colored social network urls from mine to your own.

http://feeds.feedburner.com/BloggerToolsTips with your feedburner url

http://feedburner.google.com/fb/a/mailverify?uri=BloggerToolsTips change the Feedburner ID

http://twitter.com/BloggerToolsTip with your Twitter URL

http://facebook.com/BloggerToolsTips with your Facebook Page URL

<input type="hidden" value="Way2blogging" name="uri" /> change the Feedburner ID with yours.