Cara Buat Snipping Pada Gambar Komentator Blogger

Tweet

D-Copy Blog | Hai sobat blogger, kali ini saya mempostingan tentang cara membuat snipping pada gambar komentator blogger. Maksud dari snipping disini adalah ketika Anda ataupun visitor blog Anda menyorot gambar komentator, maka gambar komentator terbebut akan berputar, 1 putaran. Jadi tidak ada salahnya untuk Anda coba.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu layout > add gadget > HTML/Javascript
3. Pastekan kode dibawah 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>

Terima kasih, semoga bermanfaat.
Sumber script : http://maribinablog.blogspot.com/2011/02/cara-pasang-efek-spinning-pada-comment.html