Avatar Komentar Berputar, apa bisa ?

Pernak Pernik untuk Tampilan Blog Bag. 2

Sekarang saya akan melanjutkan saat yang berbahagia sebelumnya yaitu Pernak Pernik untuk Tampilan Blog Bag. 1 (seperti cerita saja pakai Bag. segala) eheheh, karena saya akan melanjutkan berbagi dengan kawan masalah yang hampir sama, makanya saya pakai judul Pernak Pernik untuk Tampilan Blog Bag. 2 dan kemungkinan akan tetap berlanjut.

Pada saat ini saya tetap berfokus pada Avatar/Foto Komentator, tapi sebelumnya saya sampaikan pada kawan bahwa avatar miring yang kemarin akan tetap miring selama Blog kawan masih loading dan setelah terbuka 100% avatar tersebut akan kelihatan tegak normal, hal ini disebabkan oleh apa yang akan saya sampaikan sekarang ini !!! mau tahu apa itu, sabar kawan, saya beri nama "Avatar Komentar Berputar, apa bisa ?"
Terus bagaimana cara membuatnya, mari sama-sama kita lihat caranya [habis saya sama dengan kawan "sama-sama Newbie"]

Caranya :

1. Masuk Account Blogger dengan ID kawan
2. Pada Dasbor - Perancang Template pilih Tambah Gadget
3. Klik tanda (+) pada HTML/JavaScript
4. Copas (copy-paste) css berikut kedalamnya
5. Terakhir simpan template dan lihat hasilnya 

<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/tipsblogbegoku/fileku-1/rotate.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>

Catatan :
Avatar akan berputar apabila mouse di dekatkan pada image/avatar tersebut

Demonya : kawan bisa coba di Kotak komentar pada Blog ini

Refrensi : Blogwalking pada maribinablog