Spinning , Fading Social Sharing Icon Widget For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

This spinning and fading widget is damn cool for blogger......it'll 100% attract your visitors and it's possible if they spend half of there time to just spin these icons again again and again :p

• Go To  Your Blog > Template > Edit HTML and paste this code just above  </b:skin>

#followIcons a  {
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
}
#followIcons a  {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS  { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFv0FNaArJ-2Ec7TC6BWOw-eveAwdFhR7Ew4d2xvwZef824qKzbHtpGlx1mTVGVutBvGUhO8spmUEvOxiVb3ptblFfJcUfPc6tKEFtEW3dFkC_9k7gWaYrJx55o8sLE3hPZwf4f6bs0UM/s1600/RSS.png); }
  #iconTwitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJh3-4uDz4C-YuDWwtr_GfDks-wUcz9eeXAXlvTVXX6NHI7DwV1ivdL5t3h1H0hVzF_NPz32zNJlawLidTyWhs0D1clH8pd9jJmP75H8vCwNWEX1iHuM16cjbPdIw2zaPteJ-2OKUkALE/s1600/Twitter.png); }
#iconPlus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNf_mgRK8bzH-PbNnwxEPm7bUcnx44bgMwu4tUi5p5UrctC3ONsN1HGCm-eYskBW4-Pyn2UZcLCJEkUDyXRlzEs9msIjih7iUmYCibr4zI-4JAp8GtuY4cQs5AaNeEGimzX3slYARZ1Sk/s1600/Google++.png); }
  #iconFacebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TssP4JvWmYvLit7YbdXer_EMTKsE8Q1TH5IXl4_mgZYoIfIWBHRl_WZcOW4utmNPh6yeR1yudTDrV7UI62nysKHYTFucMaJ9e7uWeNrd6ApJNN619y12gE68plCDtJtTdNymItiQT50/s1600/Facebook.png); }

• Now paste the below JavaScript code just above </head>

<script src=”http://widcraft.googlecode.com/svn/jquery.js”></script>
 <script>
  jQuery(document).ready(function() {
   // “Globals” – Will make things compress mo-betta
   var $random = function(x) { return Math.random() * x; };
   var availableWidth = 400, availableHeight = 40;
      // Get the proper CSS prefix
   if(jQuery.browser.webkit) {
    cssPrefix = “webkit”;
   }
   else if(jQuery.browser.mozilla) {
    cssPrefix = “moz”;
   }
   else if(jQuery.browser.opera) {
    cssPrefix = “o”;
   }
   // Apply opacity
   var zIndex = 1000;
      // Randomize each link
   jQuery.each(jQuery(“#followIcons a”),function(index) {
    var startDeg = $random(360);
    var element = jQuery(this);
    var resetPlace = function() {
     element.fadeTo(250,0.6).css(“-” + cssPrefix + “-transform”,”rotate(” + startDeg + “deg)”);
    };
    element.attr(“style”,”top:” + $random(availableHeight) + “px; left:” + $random(availableWidth) + “px; z-index:” + zIndex).hover(function() {
     element.fadeTo(250,1).css(“zIndex”,++zIndex).css(“-” + cssPrefix + “-transform”,”rotate(0deg)”);
    },resetPlace);
    resetPlace();
   });
     });
 </script>

• Now Go To Layout > Add A Gadget > HTML/Java Script and paste this code

<div id=”followIcons”>
  <a href=”http://feeds.feedburner.com/WidgetCraft” id=”iconRSS”>RSS Feed</a>
  <a href=”http://twitter.com/HardeepAsrani” id=”iconTwitter”>@HardeepAsrani Twitter</a>
 <a href=”http://plus.google.com/USERNAME” id=”iconPlus”>Google Plus</a>
  <a href=”http://facebook.com/HardeepAsrani” id=”iconFacebook”>Hardeep Asrani Facebook</a>
</div> 

Now just replace URL's with your profile URL's :p

For any help/request or reporting bug just comment thanks

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.