Tutorial Comment Avatar berpusing

June 12, 2011

Google chrome only ! 
apa ni ? bila sentuh gambar pengkomen , pic dorang akan gerak2 : 0
1.Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.


2. masukkan kod nie :P
<style type="text/css">
.avatar-image-container img, comments .avatar-image-container img {-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;-o-transition-duration: 0.8s;transition-duration: 0.8s;</style><br /><br /><script src="https://sites.google.com/site/javascript10/mootools-1.3.js"></script><br /><br /><script>window.addEvent("domready",function() {// "Globals" - Will make things compress mo-bettavar $random = function(x) { return Math.random() * x; };var availableWidth = 0, availableHeight = 0;var cssPrefix = false;switch(Browser.name) {case "safari":cssPrefix = "webkit";break;case "chrome":cssPrefix = "webkit";break;case "firefox":cssPrefix = "moz";break;case "opera":cssPrefix = "o";break;}// The Iconsvar icons = $$(".avatar-image-container img, comments .avatar-image-container img ");// Apply opacityvar zIndex = 1000;// Randomize each linkicons.each(function(element,index) {var startDeg =(360);var resetPlace = function() {element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");}element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);resetPlace();element.addEvents({mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},mouseleave: resetPlace});});});</script>
3. Save :) 
4.Kalau rajin komen lah :)

4 comments

Latest Instagrams

© Anis Nadhilah. Design by Fearne.