Posted by : Farid Casablancas Mac 16, 2011


Untuk memasang spinning effect pada picture Avatar dibahagian komen seperti yang boleh korang lihat kat Gambar atas nie, Hanya ikut beberapa langkah yang mudah di bawah.

P/S: Effect akan berfungsi bila kursor mouse di letak pada image avatar tersebut.

First :
Log masuk Blogger ,DASHBOARD --> DESIGN --> ADD A GADGET --> HTML/Javascript.

Lepas tu Copy dan paste kod kat bawah nie pada content HTML/Javascript.


Copy Kod HTML kat bawah nie..
<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>

<script src="https://sites.google.com/site/javascript10/mootools-1.3.js"></script>

<script>
window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta
var $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 Icons
var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");
// Apply opacity
var zIndex = 1000;
// Randomize each link
icons.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>
Last skali, Klik SAVE.. Siap !!

Senyum! ^_^

{ 2 Orang Doakan Farid Kaya... read them below or Comment }

Welcome to My Blog

Instagram

Instagram

Followers

YouTube Channels



- Copyright © Farid Casablancas -