Social Subscription Widget For Blogs

Blogger Widget,

Rate this posting:

{[['']]}

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Today we are going to learn how to add an social subscription widget for blogger. This widget is very beautiful and simple. This social subscription widget is created by way2blogging.

Here is the screenshot of the widget:

Add Way2blogging Social Subscription Widget To Your Blog

Add CSS code

• Go to your Blogger Dashboard>>Template>>Edit HTML
• Press ctrl+f and find ]]></b:skin> above this paste the code give below

@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(" http://2.bp.blogspot.com /-HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g /Eiju-1UObXU/s48/RSS.png") no-repeat scrollleft center transparent !important;}.w2bOldSocial ul li.w2bmail { background: url(" http://2.bp.blogspot.com /-YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c /1fyAl6q9QRw/s48/Mail.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2btwitter {background: url(" http://3.bp.blogspot.com /-d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k /0jYlyJGVmXM/s48/Twitter2.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2bfacebook { background: url(" http://1.bp.blogspot.com /-SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y /THAqJLoo_vg/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(" http://3.bp.blogspot.com /-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE /dkyZEzF2HIw/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%);}

Add HTML code

• Now go to Layout>>Add A Gadget>>HTML/Javascript and paste the code given below:

<div class="w2bOldSocial">
<ul>
<li class="w2brss"><a href="http://feeds.feedburner.com/widgetforblogs">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/widgetforblogs">Twitter</a></li>
<li class="w2bfacebook"><a href="http://facebook.com/widgetforblogs">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=widgetforblogs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
<input type="hidden" value="widgetforblogs" 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>

CUSTOMIZE

Find widgetforblogs with ctrl+f and replace it with your ids

HAPPY BLOGGIN!

Get Free Updates in your Inbox

Follow us on: