Sign Up To The Free Email Newsletter!

Want to get notified whenever we produce the latest content ? Then subscribe now to start receiving hot updates from today.

Tuesday, July 12, 2011

Cara pasang efek spinning pada comment avatar

On : 12:05

Untuk menginstal spinning effect pada picture Avatar bagian komentar seperti yang dapatAnda 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>

0 comments:

Post a Comment