Cara pasang efek spinning pada comment avatar Cara pasang efek spinning pada comment avatar | Rizal saputra
RSS
email
Home » , , , » Cara pasang efek spinning pada comment avatar

Cara pasang efek spinning pada comment avatar


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:

Megi Rahman said...

disave dulu aja ah :D

TUKANG CoLoNG said...

kotak komentarku pake scroll jadi ga keliatan avatarnya.. :)

Rizkyzone said...

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

kang RAMDHAN said...

Wah.. perlu dicoba nih. thank infonya...

^Luqi A.K.A Deevro said...

deEvro BUKAn OrG bAEG uDd foLlOw..
HeHe...
tHnkz 4 FOlLOwinG My BlOg....

risky rionaldy said...

Ngasih Jempool Buat yang punya Blog

M.N.Irfan said...

kayaknya menarik nih, kapan2 aku coba ah...

obat herbal diabetes meletus said...

mau coba ah,,,, makasi tas info'a,..

╚══█▓▒╣Cyberfrogteam╠▒▓█══╝ said...

hadir..!
ditunggu real backnya..!!
thanks
n salam bloger Indonesia

fatholthearseko said...

mantab bget gan triknya,,,,salam kenal ya...
http://fatholthearseko.blogspot.com/

reckydjayoesman said...

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

 

Recent comment

read this

traffic rank

paceboox

Recent Post