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


{ 25 comments.. read them below or add one }

Beben Beben 6:22 AM
wow...it's used mootools script...so smooth...cool
karkuzaridakwahiman karkuzaridakwahiman 7:59 AM
Bro Nescafe Ais, bagaimana nak jadikan kedudukan avatar statik 25 darjah, bukannya random?
Nescafe ais Nescafe ais 8:36 AM
@karkuzaridakwahiman

Cari line ni

var startDeg = $random(360);

Lepas tu tukar jadi

var startDeg =(25);
eT eT 10:33 AM
wahhh..canggih ada spinning2...
nk try test la kt blog...
nk copy2 ni leh???hehehe
Iza Iza 1:46 PM
Salam..
Eh, best la tunggang tebalik.
nanti aku try buat...
thanks..
akuanakpahang akuanakpahang 10:42 PM
Salam, alahai tunggang terbalik jadinya yaa :)
zulkbo zulkbo 4:08 PM
salam..
ermmm..terima kasih
MENARIK...
boleh la di cuba nanti
Bung Deb's Bung Deb's 9:59 PM
wah mantap banget, harus dicoba. thanks ya
AmYcOzZo AmYcOzZo 11:59 PM
org yg punya gambar nie pning kepala x kalau aku rotate pic dia?haha pape pon nice tuto nes.. :)
abi hurairah abi hurairah 6:23 PM
aik asal guanya tak jadi ah sudahh
SobriMansor SobriMansor 8:16 AM
hahaha....pusing...pusing...jangan tak pusing...
cokelathati cokelathati 7:41 PM
wow! jadila! thanks for sharing. cemane eh
nk besarkan size image tu kecik sgtt pulak rase.
:(
imizah imizah 10:06 PM
best2 semua menjadi. thank you ^_^
Amoi Amoi 2:31 AM
tak jadi doh..
Amoi Amoi 2:35 AM
ok dah jadi lepas tukar spinning degree dia kepada nombor lain :D
Amoi Amoi 3:22 AM
tapi tak jadi kat chrome T_T
yaya yaya 2:04 PM
yaya da try. ta jadik pown. awat ey ?
azzi maihendra lubis azzi maihendra lubis 6:33 PM
tq ...
saya coba yaa...
akmal klpakmal klp 6:18 PM
dah buat.ada error. cmne?
KyLe Al-Yamani KyLe Al-Yamani 7:44 PM
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 :)
Aaduka Fairuz sukses Aaduka Fairuz sukses 7:53 AM
kasi pusing sama dia ;-)