Way2Blogging’s Social Subscription Widget for Blogger / Blogspot

Way2Blogging’s Social Subscription Widget for Blogger. This is another Social Subscription widget for Blogger. If you are my Old reader then you observed in my Old Blogger Template. Today i am giving the Code and How to add the Social Subscription Widget to your Blog.

Preview

How to Install Way2Blogging’s Social Subscription Widget ?

There are two simple steps to install this widget! Adding CSS code and Widget code!

Adding the CSS!

1. Login to Blogger Dashboard > Choose your Blog and Click the More OptionsDropdown
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&;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/AVvXsEh2iAOjE0RThbLaCJyFlw0RLSyNwBAcJb5HnsDMpwra-bc97W0eRibYOCyn-R2T8FLuj0UHwRjBogTeUvTg5Ir7iMNCM6KEFwtzwKulKKCHZUvDdIeujhmMl3VZu5AgcmeoIzly9FrxzdBq/s48/RSS.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2bmail {
   	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4UTKR2uUUk5P9y00t-pS0WyWhNGsal2A2SPcP26GNCieAo9evC1sEf7Atkiq7PYfGzot_hP8Jw8Dh6yGfM1Wvgrf-PsgoI19E3Rt6LDCKuwim9PMbuZOqpHMP8YCDP_Yr-X1CvC9PDbf/s48/Mail.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2btwitter {
   	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Eu8Dj9A64dpN50RbxLLLsUWpxUwYaGR_wQMKQsFSeJDnF58HwvIdTX3W1Ln7DVxk3cxxOGMf2FhBnA_yWxd006ucdubXoTkuoPLHjtRdmDGdmx6cNkVDowdnn_TsRnOtvo-ztMp34UPR/s48/Twitter2.png") no-repeat scroll left center transparent !important;
   }
   .w2bOldSocial ul li.w2bfacebook {
   	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRm5YxhacFFzBcLGnxAraOjVYQD0ZHIzEj_6oFYhXY0U-6hejrU5HPhaE6fDAt4qW_QKn3eUbxBh8QRjTcXQFhyphenhyphenk3sJvBnL823j1Ns8gD-CPI_eE3ZbW8zfuVItZUvhaddoij9U0Ioe4t/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/AVvXsEh6dcXxeCvpOWsBgjUQfeCLumClGdw1wqTM18tNimVGP3UMHn88jg1M6U5CKLJBngncgegwybMNvcnK1Nv-tJBB_hX4i7Ibc1stZQ3ZnuLXtgEWGxmemGnJiCFVHzvtyaECaddVMlyJPbfY/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%);
   }

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

   
   

   Customization:-
   After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
   

   
   
   • http://feeds.feedburner.com/way2blogging with your feedburner url
     
   • http://feedburner.google.com/fb/a/mailverify?uri=way2bloggingchange the Feedburner ID
     
   • http://twitter.com/way2blogging with your Twitter URL
     
   • http://facebook.com/way2blogging with your Facebook Page URL
     
   • <input type="hidden" value="Way2blogging" name="uri" /> change the Feedburner ID with yours.

Bonus Widget!

Here is a Bonus Widget for you.
Way2Blogging’s Search Box for Blogger.

Preview

How to Install the Way2Blogging’s Search Box Widget for Blogger?

Adding the CSS

Add the below css code before ]]></b:skin> tag

#w2bOldSearch {
	display: block;
	clear: both;
	margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsH_joDt4hgE40WEobMUU4lANRcEa7lF0ky6Jvbcrfhfk3kyLJY_IVHoffSSEviSXmOWRrfbv7g-Mha5vQuQPp3FUbOxAU8ncIDvIBGC7nh4dvHOOP-ZxoP_vIML52VfNsOr2gCnPZ_wz_/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
	padding: 7px 15px 7px 35px !important;
	color: #444;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #D3D3D3 !important;

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

#w2bOldSearch #w2bSsubmit {
	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%);
}

Adding the Widget Code

Add the below widget Code in HTML/JavaScript Gadget.

<div id="w2bOldSearch">
	<form action="/search">
		<input type="text" name="q" id="w2bSinput" />
		<input type="submit" value="Search" id="w2bSsubmit"/>
	</form>
</div>

That’s it! If you liked the widgets and this post then please share it.
leave your comments and suggestions.

Source http://www.way2blogging.org/2012/05/way2bloggings-social-subscription-widget-for-blogger-blogspot.html