Untuk menginstal spinning effect pada picture Avatar bagian komentar seperti yang dapat Anda lihat pada gambar diatas, Hanya ikut beberapa langkah yang mudah di bawah.
p / s: Effect akan befungsi saat kursor mouse di letak pada image avatar tersebut.
Langkah 1
Login Blogger Dashboard -> Design -> Add A Gadget -> HTML / Javascript.
langkah 2
Copy dan paste kode 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="https://sites.google.com/site/javascript10/mootools-1.3.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>





12 comments:
disave dulu aja ah :D
gitu ya? ....
kotak komentarku pake scroll jadi ga keliatan avatarnya.. :)
keren juga bentuknya, kalau avatar coment blog q tak di sable aja, kan g karen kalau komentarnya g lagi ol, tp menggunakan nama / url, gambarnya jd g muncul
Wah.. perlu dicoba nih. thank infonya...
deEvro BUKAn OrG bAEG uDd foLlOw..
HeHe...
tHnkz 4 FOlLOwinG My BlOg....
Ngasih Jempool Buat yang punya Blog
kayaknya menarik nih, kapan2 aku coba ah...
mau coba ah,,,, makasi tas info'a,..
hadir..!
ditunggu real backnya..!!
thanks
n salam bloger Indonesia
mantab bget gan triknya,,,,salam kenal ya...
http://fatholthearseko.blogspot.com/
hmmm keren ane mau coba akh
Post a Comment
Komentar apa aja sob,mau iklan, mau nyepam mau apa aj boleh,yang penting komentar. Kalau mau follow saya dan konfirmasi, nanti akan sya follow balik, dan jangan kapok berkunjung di blog berat ini !!!