Social subscription widget is most important thing to be added to your blogs, its not just help to increase the traffic but it converts your one time readers to returning one. You might see lots of social subscription widgets in one blog which added with the intent of increase subscribers of the blog but actually its impact negatively as it looks ugly and no one will like to spend their time to read something on ugly place. Your blog should be clear with eye catchy background that can your blog's readers can feel comfortable while reading articles on your blog and also they will like to spend more time in your bog in reading articles. There's a lot of benefit of making your blog simple and clear. but what about social subscriptions widget? if your blog has no more space on the a particular location then here is present an another
perfect social subscription widget for blogger/blogspot. After adding this widget to your blog you will not need to use other space of your blog in order to show subscription widgets. In this widget contains Facebook , Twitter, RSS, E-mail and subscribe by email features and these are enough for any blog.
Related : Add Mashable Style Social Subscription Widget to Blogger / Blogspot
As you can see the preview of the widget in the screenshot above. and now if you would like to have that same widget in your blog then simply follow the steps given below.
How to add this widget to blogger?
Go to
blogger dashboard > Template > Edit HTMLSearch for the tag
]]></b:skin> and place the below code just 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/AVvXsEjIFlRs8-ii_sJ2R93_UgVfPtNOQH8hmVrmzZx2Fndn9ZFcgukxiwulpRTTEuoylHmKC6JYPbvaV2-_hlBc14CNxcABk9dnOKAWG3kZbhyV4DzCfbEd2E6mQHn1IhoJQJa5bba_4OrzjBmx/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh_D9UqCIjeP5kNeUb_83UauKyQGovEg3gfgbRTVCIQRxa67pm6YlsqHCysR7gukITCda6M-t4vgo-vhUXrrRq_OJuKqoUx9UTvdFpR_6Kp-KTpZmgCeLUm2WnX9Ekd-KWEysmFY4snWYL/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPJ2EU5EUINjtSR2zSbA0DYrnxNEZc7hEif_uyMnYPyqLfM6615NxMtzqK3rch3Msq16gfegd3EvIkW1kdqnPSNETxKPo-30Lod2QHJSfHCVTmt5_-juXtBq3vUii4ltSmcLkpFTA6Hhe/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyfOaGlJL2pUABgz0v08IEsSRn6mdwZUNCn5n6R-PfkyQC7ONRWIA30kNBpcL-auosNqxD3Z0W4sJq8ddaDk9mx7FUfwxafh9v_GyUqlo0g1gVPVDEGz-oh6ykqVTgw7PUvVDuUTvFWCCR/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/AVvXsEhB0Ry-rwpfwUDZ5Dj7cXu8ysNSfMzal4yE0sPnbOUO0YAjjIKFQEq10_RG0aT-dynYc-mBdS8ppdtJjgQJ4SBBnLu2sFeBTaG7rFBJjVttmJ_ICHop1iU5ivAVLE7ztAKmewMz1MQK0S_Q/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%);
}
Now, Save your template and navigate to Layout > Add a widget >
Choose HTML/Javascript from the list.
Copy and paste the code below into it.
<div class="w2bOldSocial">
<ul>
<li class="w2brss"><a href="http://feeds.feedburner.com/bloggerwidgetgenerators">RSS</a></li>
<li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggerwidgetgenerators" >Email</a></li>
<li class="w2btwitter"><a href="http://twitter.com/nitinmaheta">Twitter</a></li>
<li class="w2bfacebook"><a href="http://facebook.com/bloggerwidgetgenerators">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=bloggerwidgetgenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
<input type="hidden" value="bloggerwidgetgenerators" 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>
Customization:-After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
http://feeds.feedburner.com/bloggerwidgetgenerators with your feedburner urlhttp://feedburner.google.com/fb/a/mailverify?uri=bloggerwidgetgenerators change the Feedburner IDhttp://twitter.com/nitinmaheta with your Twitter URLhttp://facebook.com/bloggerwidgetgenerators with your Facebook Page URL<input type="hidden" value="bloggerwidgetgenerators" name="uri" /> change the Feedburner ID with yours.