How to Add Amazing Social Widgets

This is another cool social widget for you to integrate in your site. Safeer Ahmed shows you his version called Amazing Social Widgets.
Here’s how you can add to your Blogger blog:

• Go to Blogger Dashboard.
• Go to Layout > Add a Gadget > HTML/JavaScript.
• Copy and paste the code provided below in the content area.

<style>

/*social icon By howdoblog.com*/

#head-htb{width:230px ; }

#head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;}

#head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0;

overflow: hidden ; height: 64px; width: 64px ;border: 

0px; background:transparent url(https://lh4.googleusercontent.com/-yEXXN_B-

6l8/UCRV34EwUvI/AAAAAAAAAWw/p409CMgxlXw/s353/Social%2520Media%2520Widget.PNG)

no-repeat; display: block;}

#head-htb li#fb a {background-position: -210px 

0px;margin:0px 0px;}

#head-htb li#fb a:hover {background-position: -210px 0px;margin:0px

0px;transform:rotate(30deg);

transform:rotate(15deg);

-ms-transform:rotate(15deg);

-moz-transform:rotate(15deg);

-webkit-transform:rotate(15deg);

-o-transform:rotate(15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}

#head-htb li#twit a {background-position: -290px 

0px;margin:0px 0px 0px

7px;}

#head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px

0px 7px;transform:rotate(30deg);

transform:rotate(-15deg);

-ms-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

-webkit-transform:rotate(-15deg);

-o-transform:rotate(-15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}

#head-htb li#g a {background-position: 0px 0px;margin:0px 

0px 0px -8px;}

#head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px

-8px;

transform:rotate(15deg);

-ms-transform:rotate(15deg);

-moz-transform:rotate(15deg);

-webkit-transform:rotate(15deg);

-o-transform:rotate(15deg);

-moz-transition-duration:950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}

#head-htb li#rss a {background-position: -68px 

0px;margin:0px -3px;}

#head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px

0px -3px;transform:rotate(30deg);

transform:rotate(-15deg);

-ms-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

-webkit-transform:rotate(-15deg);

-o-transform:rotate(-15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}

/*Social Icons howdoblog.com */

</style>

<div id="head-htb">

<ul>

<li id="fb"><a href="YOUR FB URL">Facebook</a></li>

<li id="twit"><a href="YOUR TWT URL">Twitter</a></li>

<li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li>

<li id="rss"><a href="YOUR RSS URL">RSS

Feed</a> </li>

</ul>

</div>

<div align="left">

<font size="0.125">

<a href="http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-

bloggers.html">

[Grab This]</a></font>

</div>

• Save.

Note: Always make a backup first before doing any customizations in your template. Replace the following with your own URL links:

• Your FB URL (Facebook fan page)
• Your G+ URL (G+ profile or blog fanpage)
• Your TWT URL (Twitter account)
• RSS FEED LINK (feed links)