Membuat Snipping Pada gambar Komentantator - Blogger

 Membuat snipping pada gambar komentator blogger - Maksud dari kata 'Snipping' pada post kali ini adalah, ketika kursor mengarah ke avatar komentator/gambar komentator, maka avatar komentator tersebut akan berputar sebanyak 1 putaran. Wah, menarik bukan? Yuk Coba!

1. Login  Blogger.
2. Tata letak.
3. Add gadget.
4. HTML/Javascript, lalu paste-kan kode ini dan save :

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

Sumber Script : http://maribinablog.blogspot.com/2011/02/cara-pasang-efek-spinning-pada-comment.html