Cara pasang efek spinning pada comment avatar


Untuk memasang spinning effect pada picture Avatar dibahagian komen seperti yang boleh anda lihat pada komen blog ini, Hanya ikut beberapa langkah yang mudah di bawah.

p/s: Effect akan befungsi apabila kursor mouse di letak pada image avatar tersebut.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.


<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="http://mootools-code.googlecode.com/files/mootools-1.3.2.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>

Akihr sekali, klik Save

p/s: View terbaik effect ini dengan menggunakan Google Chrome
Cara pasang efek spinning pada comment avatar

wow...it's used mootools script...so smooth...cool

Bro Nescafe Ais, bagaimana nak jadikan kedudukan avatar statik 25 darjah, bukannya random?

@karkuzaridakwahiman

Cari line ni

var startDeg = $random(360);

Lepas tu tukar jadi

var startDeg =(25);

wahhh..canggih ada spinning2...
nk try test la kt blog...
nk copy2 ni leh???hehehe

Salam..
Eh, best la tunggang tebalik.
nanti aku try buat...
thanks..

Salam, alahai tunggang terbalik jadinya yaa :)

salam..
ermmm..terima kasih
MENARIK...
boleh la di cuba nanti

wah mantap banget, harus dicoba. thanks ya

org yg punya gambar nie pning kepala x kalau aku rotate pic dia?haha pape pon nice tuto nes.. :)

aik asal guanya tak jadi ah sudahh

hahaha....pusing...pusing...jangan tak pusing...

wow! jadila! thanks for sharing. cemane eh
nk besarkan size image tu kecik sgtt pulak rase.
:(

best2 semua menjadi. thank you ^_^

tak jadi doh..

ok dah jadi lepas tukar spinning degree dia kepada nombor lain :D

tapi tak jadi kat chrome T_T

yaya da try. ta jadik pown. awat ey ?

akmal klp
delete

dah buat.ada error. cmne?

nk tnya bnde ni leh tambah berat blog ke.boleh x awak tgk my blog ape yg perlu dibuang supaya x berat.saya dah compress semua coding html n css yg ade kt blog.n yg tinggal tu mmg bnde yg saya x mau buang.any suggestion.i wanna make it less than 150kb.hope u will reply at my blog coz kalau reply kt sini saya x tau bile u dh reply .thnxx :)