Add Amazing Social Widgets

This is another cool social widget for you to integrate in your site. #HaCkInG 'O' sHiT 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 Urduhacks*/

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyA9GKmlUvZhIoIUgpjJDSSR0B6eRdw7DWpiQCT23YVyc1B5FGWUemmvFTV0WLov4CAmFF9hY7V9YGj5CzObzMY3YS82K0c5ueWefEY1hhc1ANMTLk5KgiX9SZ4CoWqfigcyAAJ7e1/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 Urduhacks */

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

</a></li>

</ul>

</d <br>

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)