Way2Blogging Social Subscription Widget For Blogger

Today we are know how to add Way2Blogging Social Subscribe Widget for blogger blog.It include social button and subscribe box in the widget.So follow steps for add this widget.This widget create by Way2Blogging.

Preview:-

Step 1: 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!

@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/AVvXsEiFBJ1v1E2hhttl2YHTeN_CCXqlgZycNNekrmwMq_rIOjI1Z40cf1dkSsJMo_9NQHpAv6xK8SjpZyZVLj4Gs3SmjRiHIj_mqIhvkjuf8Be6ZT1Zgt8YpBpqZmq_WvaQ4kVn27svnssLfuCF/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JqF9lrifGsbqsrXuhU0iRWIDmp1uanOGM3nMRHYK5pvIvcnroruSQwprBNYofarv_wT_GU526tmQo-5qtmjLFjNIfNRpVx3QpOXIdlb-2LVawF3X-IKTx5_3fTYlV6zykxfNtnB_nl0c/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-Rg-_X2dCCFMUUViT3ikmHcnpxtnxl1TQjfD9fLScykhCc1NfBGBgU25UjbGxB_gGJx_hdIXqtmvm4UGghxk22jezW_2bBOg4k_QOD4jo0FNlOJmXjjKp5YXCBRD-sydkIuV_jPhXrA1/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTmQOHF7WXcqkw4IXI74EFqgoT3tImfUI7QFo51Vc2vdrKUm1VVMW_mLZq9xJB4cMAZ4rV2Hi1oxGsIMR7eIvgYQ5Px2fNSn_6ig6AJ5srAtzHVHAHvR7poXP8sRhqBz-1cefbZjrRMiH/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/AVvXsEgCV0QR3LKr_3MAxgq9agTPaAUHdE39Jv44ILdsC363qC6AQyeDp95c1C0K6EADn8hWXiD5Xpn-Gh2856WiSDaUnPmTbZykct3D6bgz5MCchjwNcdMgVuodVgYh6Nexv_iWOy2UVXGPgyCa/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%);
}

Step 2: 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/simplebloggertricks">RSS</a></li>
<li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=simplebloggertricks" >Email</a></li>
<li class="w2btwitter"><a href="http://twitter.com/simplebloggertricks">Twitter</a></li>
<li class="w2bfacebook"><a href="http://facebook.com/simplebloggertricks">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="simplebloggertricks" 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/simplebloggertricks with your feedburner url
• http://feedburner.google.com/fb/a/mailverify?uri=simplebloggertricks change the Feedburner ID
• http://twitter.com/simplebloggertricks with your Twitter URL
• http://facebook.com/simplebloggertricks with your Facebook Page URL
• <input type="hidden" value="simplebloggertricks" name="uri" /> change the Feedburner ID with yours