Cara Membuat Avatar Komentar Berputar


Sekarang saya akan mencoba berkreasi pada Avatar / Image Komentar, maksudnya disini kalau mouse Komputer di dekatkan pada Avatar maka Avatar tersebut akan berputar. :@

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

Description: Cara Membuat Avatar Komentar Berputar - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Cara Membuat Avatar Komentar Berputar


Kawan sedang berada pada Artikel
» Cara Membuat Avatar Komentar Berputar
di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
asal kawan menyertakan Link / Sumber Artikelnya

Artikel Menarik Lainnya :


Comments
4 Comments

4 komentar pada : “Cara Membuat Avatar Komentar Berputar”


KOMENTAR MENCERMINKAN KEPRIBADIAN KAWAN BLOGGER
EKSPRESIKAN KOMENTAR DENGAN EMOTICON :

:a :b :c :d :e :f :g :h :i :j :k :l :m
:n :o :p :q :r :s :t :u :v :w :x :y :z