Cara Buat Comment Avatar Berputar

Salam semua. hari ini admin nak berkongsi lagi tutorial mudah dengan korang. kali ini admin kongsikan Cara Buat Comment Avatar Berputar. seperti yang korang lihat pada gambar diatas, comment avatar akar berputar apabila diajukan mouse. comment avatar juga akan kelihatan "blurr" dan hanya akan kelihatan terang apabila diajukan mouse.

Berminat nak buat?. sila ikut seperti yang admin ajarkan. cukup mudah...huhu. yang penting korang kena ada coding seperti dibawah :

<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>


Pada dashboard korang klik design > page elements > add gadget > HTML Java Script > paste coding diatas. lepastu korang save dan lihat hasilnya. kepada yang masih belum faham sila tengok print screen yang admin sediakan dibawah

ADD A GADGET

 

HTML Java Script

Paste coding dan SAVE

Semoga admin dapat membantu mencantikkan lagi blog korang yer. tentu menarik bila comment avatar tu berpusing-pusing...huhu. ikhlas dari admin untuk semua. ada komen atau cadangan boleh utarakan disini.

Suka dengan apa yang admin kongsikan?. sila klik pada button dibawah sebagai tanda sumbangan ikhlas anda untuk duniakongsi.net. hanya sedikit iklan untuk menampung duniakongsi. sumbangan "klik" dari anda sangat admin hargai dengan ucapan terima kasih