Cara Membuat Avatar pada Komentar Blog Berputar bila mouse mendekat Cara Membuat Avatar pada Komentar Blog Berputar bila mouse mendekat

Sekarang saya akan mencoba berbagi Kreasi yaitu Cara Membuat Avatar pada Komentar Blog Berputar bila mouse didekatkan disamping Avatar tersebut, sebenarnya pada prinsip dasarnya script tersebut untuk membuat Avatar terang dari redup diisi Kreasi Berputar seperti Bola

Cara ini saya temukan di Blogger tetangga Faceblog-riekha yang merupakan posting lawas disana 

Cara Membuatnya

• Masuk Account Blogger dengan ID kawan
• Pada Blogger Home pilih Template - Edit HTML
• Copas Script berikut sebelum </body>

Atau :

• Pada Blogger Home pilih Tata Letak
• Pada Dasbor pilih Tambah Gadget - HTML / JavaScript
• Copas Script berikut kedalamnya ;

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

Simpan Template / Blog kawan