Wednesday, March 20, 2013

Add Wooden Style Social Icons Widget To Blogger Blog

Author: Gagan Masoun
Add Wooden Style Social Icons Widget To Blogger BlogBloggers love widgets so much. Because with the help of attractive and advanced widgets and gadgets they can make their blog perfect. In this short tutorial, I'm going to share "How to Add Wooden Style Social Icons Widget To Your Blogger or WordPress Blogs". This widget is simply made by using the CSS and HTML and some images also.

It contains Facebook, Twitter, Pinterest, RSS Feed and Stumbleupon buttons. Check out the picture below as a demo and follow given steps to install this widget:

Live Demo

Add Wooden Style Social Icons Widget To Blogger

  1. Go to Dashboard > Design > Page Elements.
  2. Click Add A Gadget. In New Window, Select HTML/Javascript .
  3. Copy The Code Given Below and Paste It Inside The Box.
  4. Save The Gadget and Its Done

Add Wooden Style Social Icons Widget To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets
  2. Drag Text Widget Into a Sidebar.
  3. Paste In The Code.
  4. Save Widget & Its Done

Code For Wooden Style Social Icons Widget

<style>
/* Social Icons
----------------------------------------------- */
a.social-icons {
 margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>
<a class="social-icons" href="https://www.facebook.com/BlogsDaddy" target='_blank' rel='nofollow'><img src="http://goo.gl/MkLAa" /></a>
<a class="social-icons" href="https://twitter.com/BlogsDaddy" target='_blank' rel='nofollow'><img src="http://goo.gl/H3uTa" /></a>
<a class="social-icons" href="http://pinterest.com/gaganmasoun" target='_blank' rel='nofollow'><img src="http://goo.gl/TgDrp" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/BlogsDaddy" target='_blank' rel='nofollow'><img src="http://goo.gl/WfxyR" /></a>
<a class="social-icons" href="http://www.stumbleupon.com/stumbler/gaganmasoun" target='_blank' rel='nofollow'><img src="http://goo.gl/240yd" /></a>
Remember Notes : The social and feed links are highlighted in red color, you need to change these to your own.

If you think this is really cool social subscription widget then Do let me know via comments.! Join our conversation. Happy Blogging and Stay Blessed :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

0 comments:

Post a Comment