Social Subscription Widget is one of the most popular widget in blogger , So today im giving the Code and how to add it to your blog , Just follow me :
First one To do it : Adding The Css Code
- Login to blogger account > Choose Your Blog
- Template > Edit HTML
- Search For ]]></b:skin>
- Just above ]]></b:skin> add the following CSS stylin
- g:
<!--Social Widget START-->
@import url("http://fonts.googleapis.com/css?family=Oswald&;amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.AllBTips ul {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
overflow: hidden;
}
.AllBTips ul li {
float: left;
width: 90px;
padding: 0 0 0 55px !important;
margin: 0 0 0 5px !important;
line-height: 48px !important;
}
}
.AllBTips ul li a {
font-size: 20px !important;
text-decoration:none;
padding:0 !important;
margin:0 !important;
text-decoration:none;
}
.AllBTips ul li a:hover {
text-decoration:underline;
}
.AllBTips ul li.w2brss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQ6m4d1ZCIKOkSJJvlso0Y9pVK-KHoPCCSbkX71UU6c9ZRht1GbE8fO6eQ3O865_uPRvC6gbJqiXY7DERvpDwCnTJR7d45lMxM2qUl0_MqZlkMqlPid7ONYO2JudmCsHe-OwvmNE2cb-j/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.AllBTips ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNecCvlwUEAnQank0166yb0UuOnHafIEVLK8cOqC_ggPrgkfL9bTbv9ha_-6ZAJ4jYZArnGq7b-yCMN3UbZIeF0MGcguUOQvbZHlySZH7vJUnUbO4TVUDsUADgvFa0j918BmqJGh_aBj5W/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.AllBTips ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7z7PLSpngA6rrLgEJ48UezX0odwWBCBolUabXthhDonIILKwTKdshnBNeY9D350IMSais63hsl8quK4pTlRDFyp65st6Qn0OL2FOj20ASzG1yBnrDDGB8t0C95ovjliVfpan470gjiOr5/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.AllBTips ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyYcwtbb9HU0T66dJVYq8AflJI_f5fJVVnYUk084RdIefAoEUuWS1ay3UQoABGPWcH8AT37P1PuqROyYWWRVzZgpSKrrfELWkOOHjjg5458RZbrBqbJTnn_M68aQhrRlMrrlax1Nv4tFa/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#AllBTipsEmailsub {
display: block;
clear: both;
margin: 10px 0;
}
form.AllBTipsEmailform {
margin: 20px 0 0;
display: block;
clear: both;
}
.emailText {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuTgGlK5Lmbg5t4Z6jVPovYC4ZHX79ijbmh0MLuO_tLGAI37wg0w7b6U1nipQMsyfycrB9ytfaI3Sf9M1EtQF_TYpDGWqovr93RdnxDu4XInyDRRI21mSE-M-dOD9DRwJOBNC5EtmFkWN/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%);
}
<!--Social Widget END-->
Two: Adding the Widget
- Go to Layout > Add Gadget
- Choose HTML/JavaScript & Paste The Code Below
<div class="AllBTips">
<ul>
<li class="w2brss"><a href="http://feeds.feedburner.com/allbloggertipss">RSS</a></li>
<li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=AlbloggerTipss" >Email</a></li>
<li class="w2btwitter"><a href="http://twitter.com/BloggerTipsPage">Twitter</a></li>
<li class="w2bfacebook"><a href="http://facebook.com/BloggerTipsPage">Facebook</a></li>
</ul>
</div>
<div id="AllBTipsEmailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=allbloggertipss', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="AllBTipsEmailform">
<input type="hidden" value="allbloggertipss" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" />
<input type="submit" class="emailButton" value="SignUp" title='' />
</form>
</div>
By: <a href="http://www.allblogger.tips/2015/01/how-to-add-social-subscription-widget.html">Social Subscription Widget</a>
Customization:-
After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
http://feeds.feedburner.com/allbloggertipss with your feedburner url
http://feedburner.google.com/fb/a/mailverify?uri=allbloggertipss change the Feedburner ID
http://twitter.com/BloggerTipsPage with your Twitter URL
http://facebook.com/BloggerTipsPage with your Facebook Page URL
<input type="hidden" value="allbloggerTips" name="uri" /> change the Feedburner ID with yours.
Enjoy ,
Enjoy ,
Post a Comment