Cara Membuat Avatar Komentar Blogspot Menjadi Animasi

Cara Membuat Avatar Komentar Blogspot Menjadi Animasi | Cara Membuat komentar Dengan Gambar Avatar Animasi  Maksudnya Gambar para komentar bila mata mouse diarahkan ke Avatar akan berputar contohnya di komen blog ini.

Sebenarnya Tampilan ini lebih maksimal menggunakan Google Chrome,namun FF dan IE juga mantap kok.Siapa tahu anda berminat untuk menggunakan ini gampang banget caranya kok.

Bagi sobat Blogger yang tertarik untuk menampilkannya ke dalam blog sobat silahkan gunakan kode berikut, caranya:

login ke blogger 

Pilih Rancangan 

Lalu "add gadget" 

Pilih HTML/Javascript 

isikan dengan kode berikut di dalamnya 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script> <script type='text/javascript' src='http://javscript-code.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0'></script> <script type="text/javascript"> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAf4msDK62Ell473NTZrc2ixUEhyLWUJFA9ox_1yAfu5Bay8r73T6stOEfIlOonZBHQMykfqx_Ue56fyiZB_eDepfclZYFQEJDYXqUJL8zkFtI4IHyqNmdIu8LjJYHOyNo46nFLF1rEFo/s1600/grey.gif" }); }); </script> <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>

Demikian tips menampilkan Avatar komentar blogspot menjadi animasi