<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/s320/Wayang+Kulit.jpg" id="homeLogo">Deviation</a>

<style type="text/css">
a#homeLogo { 
 width:300px; 
 height:233px; 
 text-indent:-3000px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/s200/Wayang+Kulit.jpg) 0 0 no-repeat; 
 display:block; 
 z-index:2; 
}
a#homeLogo span { 
 float:left;
 display:block;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNmxihILz4bjeM8fzLSnKW2WDVMNx_mESveJMMmNkNjLg9smo2AkW1Z2iQhrRlqFTMJECaNSqh6CPM6bEkGtfvgcOgOuUzz7JEafs8KaLOnm5GiS6riMEMLyuhJ0e11EJo78j9s80WzuQB/s200/Wayang+Kulit.jpg); 
 background-repeat:no-repeat;
}
.clear { clear:both; }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>

<script>
Number.random = function(min, max){
 return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

 scatter: function(){
  return this.translate({
   x: Number.random(-1000, 1000),
   y: Number.random(-1000, 1000),
   z: Number.random(-500, 500)
  }).rotate({
   x: Number.random(-720, 720),
   y: Number.random(-720, 720),
   z: Number.random(-720, 720)
  });
 },

 unscatter: function(){ 
  return this.translate(zeros).rotate(zeros);
 },

 frighten: function(d){
  var self = this;
  this.setTransition('timing-function', 'ease-out').scatter();
  setTimeout(function(){
   self.setTransition('timing-function', 'ease-in-out').unscatter();
  }, 500);
  return this;
 },

 zoom: function(delay){
  var self = this;
  this.scale(0.01);
  setTimeout(function(){
   self.setTransition({
    property: 'transform',
    duration: '250ms',
    'timing-function': 'ease-out'
   }).scale(1.2);
   setTimeout(function(){
    self.setTransition('duration', '100ms').scale(1);
   }, 250)
  }, delay);
  return this;
 },

 makeSlider: function(){
  return this.each(function(){
   var $this = $(this),
    open = false,
    next = $this.next(),
    height = next.attr('scrollHeight'),
    transition = {
     property: 'height',
     duration: '500ms',
     transition: 'ease-out'
    };
   next.setTransition(transition);
   $this.bind('click', function(){
    next.css('height', open ? 0 : height);
    open = !open;
   });
  })
 },

 fromChaos: (function(){
  var delay = 0;
  return function(){
   return this.each(function(){
    var element = $(this);
    //element.scatter();
    setTimeout(function(){
     element.setTransition({
      property: 'transform',
      duration: '500ms',
      'timing-function': 'ease-out'
     });
     setTimeout(function(){
      element.unscatter();
      element.bind({
       mouseenter: jQuery.proxy(element.frighten, element),
       touchstart: jQuery.proxy(element.frighten, element)
      });
     }, delay += 100);
    }, 1000);
   })
  }
 }())

});


// When the DOM is ready...
$(document).ready(function() {
 
 // Get the proper CSS prefix
 var cssPrefix = false;
 if(jQuery.browser.webkit) {
  cssPrefix = "webkit";
 }
 else if(jQuery.browser.mozilla) {
  cssPrefix = "moz";
 }
 
 // If we support this browser
 if(cssPrefix) {
  // 300 x 233
  var cols = 10; // Desired columns
  var rows = 8; // Desired rows
  var totalWidth = 300; // Logo width
  var totalHeight = 233; // Logo height
  var singleWidth = Math.ceil(totalWidth / cols); // Shard width
  var singleHeight = Math.ceil(totalHeight / rows); // Shard height
  
  // Remove the text and background image from the logo
  var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");
  
  // For every desired row
  for(x = 0; x < rows; x++) {
   var last;
   //For every desired column
   for(y = 0; y < cols; y++) {
    // Create a SPAN element with the proper CSS settings
    // Width, height, browser-specific CSS
    last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
    // Insert into DOM
    logo.append(last);
   }
   // Create a DIV clear for row
   last.append(jQuery("<div />").addClass("clear"));
  }
  
  // Chaos!
  jQuery("#homeLogo span").fromChaos();
 }
});
</script>

<div style="padding:20px 0;position:relative;">
<div id="followIcons">
<a style="top: 0.653561px; left: 132.318px; z-index: 1022; opacity: 0.6; -moz-transform: rotate(36.7188deg);" href="http://feeds.feedburner.com/TemplateForYourBlog" rel="nofollow" id="iconRSS">RSS Feed</a>
<a style="top: 38.5985px; left: 200.085px; z-index: 1023; opacity: 0.6; -moz-transform: rotate(74.7156deg);" href="http://twitter.com/bambangwi" rel="nofollow" id="iconTwitter">@Bambang Wicaksono Twitter</a>
<a style="top: 2.87457px; left: 131.284px; z-index: 1012; opacity: 0.6; -moz-transform: rotate(191.92deg);" href="http://www.stumbleupon.com/bambangwi" rel="nofollow" id="iconstumbleupon">@Bambang Wicaksono Stumbleupon</a>
<a style="top: 29.391px; left: 245.218px; z-index: 1000; opacity: 0.6; -moz-transform: rotate(295.304deg);" href="http://www.delicious.com/bambang_wicaksono" rel="nofollow" id="iconDelicious">Bambang Wicaksono de.licio.us</a>
<a style="top: 33.1283px; left: 248.676px; z-index: 1024; opacity: 0.6; -moz-transform: rotate(78.0497deg);" href="http://facebook.com/masbambangwicaksono" rel="nofollow" id="iconFacebook">Bambang Wicaksono Facebook</a>
<a style="top: 15.11px; left: 93.4135px; z-index: 1017; opacity: 0.6; -moz-transform: rotate(346.566deg);" href="http://www.reddit.com/bambangwi" rel="nofollow" id="iconreddit">Bambang Wicaksono Reddit</a>
<a style="top: 28.4499px; left: 47.2333px; z-index: 1020; opacity: 0.6; -moz-transform: rotate(65.6721deg);" href="http://www.digg.com/users/bambangwi" id="icondigg">Bambang Wicaksono Digg</a>
<a style="top: 13.7949px; left: 36.0966px; z-index: 1021; opacity: 0.6; -moz-transform: rotate(210.147deg);" href="mailto:bambang_wicaksono@yahoo.com" id="iconMail">Bambang Wicaksono Email</a>
<a style="top: 24.9191px; left: 393.534px; z-index: 1019; opacity: 0.6; -moz-transform: rotate(264.417deg);" href="http://www.google.com/reader/view/feed/http%3A%2F%2Ffeeds.feedburner.com%2FTemplateForYourBlog" rel="nofollow" id="iconfavorite">Bambang Wicaksono Feed</a>
</div>

</div>

<style type="text/css">
#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;
-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/AVvXsEjcIWDYyUd5bchzQir6AiWmsxEZF2wUxYoMInCjomt_yvCCAwNxGuxVmr3cPmD2PDI0AXq2sQutJKwROLA2s_TnrsuM7-6UxBQgQ6bPMdLUhhuzDiSn-TBuKJSgwA2FBeLCljREw3TJGrit/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4FdX4e4Lxm0x4dCZNr7cWftdCN5vk9bMfnZOo-IiMFgow2vin683DcEzaJ0Rh00yO8c6AJ_kDrmc15HQORlcX-tBG1Md3YD0XsireJsFtR_ao7Riit9K5Vm1xWQsvP-2osQVdKXkqHqP/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClkFpEay54cugbv2GohHv423Ize-0C8L3ln6KNgqkCMq0_GgagSesykrNS6z_7Tlis_I65e9Xwy36d8yCO073_VME76h0ie2u310TbEIC-oA2WvL4bP98v3LnetVRT4YwJvVVL4Dl4doK/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmXNYX3YuAnjMIjNWtJ8E8kroL_FxMObeSePRKhQ8qb3S0lkxLW7HoWb9aPJiiViVx79vC5yUMnwucM1cj1REDW1DtzjCE_oNP1QIph6o3qqseA9xcml-r21ZhvNF-ce31RSQ5a-EKBpM/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MSJSfFJcLvSyWu0tv9X6VuOGapoUXelYJiVKpnzjMS0oU0GaJZchOpalREecf9RBCOPJxl5Fp7qVhFv2SWx15wMWzmzTaHS8T6eY8nxCRXtTaorgLFw7p-Y9QjW6JE7EK5tVdV4qZxsu/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXElT3h0qsLFnrTScNgXi106oHPnG4OwlWuKq2sSvMpC_yoDS-AzraMEAPRx1HkwuIdXcMbyuP-DRejNtxGhdGJRyWclPqJbfXKLt0VLIcAP9mo7fPHm50ckJnPTmo_wPDfIxhEZvlkp1/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQ5BRzEnZRd6Z-VLhNyUBc3VOy2qNT68MRVj85DlqIKPaxzmBqHjbBU0r5WZXlRnmbcpe1ZqG_mBA1oJHil-jbHkSujqlwLSNTtoaY8NZROD9DEkXAn5I_0x_LBC6tqjW8kT7koaWHMj8/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw2TTnnxSm4s6tnMZAFETWcssEqbZOwBZoa3WYEBHROFGKT3NBpj2tPzGJsfXEzmnq3j4emKgs8tNgoenC8RQ4FKsfN7T0epTIkyN6_JoJywQoeIvh5gik41Od7KvZKEuT_S0WAxdUIXfn/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvyGHOTuDiDvSU8pYnU0dDq4eFWPbl1NZZTnK_uGxEPGCCMfdgPyTLOWBINy5HkzaCsPY_ugETCiOJzRR4eD2lUOyfCFCDMDegTIXDKwAyIcNcI8gTUtJPgDPDiIVbim3raUO3zAC7Ea8/s1600/favorite.png); }
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.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>