Cara Membuat Avatar Komentar Berputar

Putu BlogBego - Jumat, 01 Februari 2013 - 06:00 wita
Sekarang saya akan mencoba berbagi Kreasi yaitu Cara Membuat Avatar pada Komentar Blog Berputar :y; bila mouse didekatkan disamping Avatar tersebut, sebenarnya pada prinsip dasarnya script tersebut untuk membuat Avatar terang dari redup diisi Kreasi Berputar seperti Bola :z;
Cara ini saya temukan di Blogger tetangga MariBina Blog yang merupakan posting lawas disana 

Cara Membuatnya
  • Masuk Account Blogger dengan ID kawan
  • Pada Blogger Home pilih Template - Edit HTML
  • Copas Script berikut sebelum </body>
Atau :

  • Pada Blogger Home pilih Tata Letak
  • Pada Dasbor pilih Tambah Gadget - HTML / JavaScript
  • Copas Script berikut kedalamnya 



<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/blogbegocreation/javascript/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>

  • Simpan Template / Blog kawan



Berbagi Artikel :

Cara Membuat Avatar Komentar Berputar
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Avatar Komentar Berputar
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

2 Komentar pada : “Cara Membuat Avatar Komentar Berputar”

  1. tenks gan.......FROM agus sani
    oya gan saya mau masuk forum kk lau boleh tau apa ya gan alamat webNYA..?

    BalasHapus
    Balasan
    1. saya kurang paham maksud kawan kk lau itu apa
      Kalau saya tak punya Blog Forum :d;

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation
Langsung di Email Kawan




»
BANNER [300x250]
Protected by Copyscape Web Copyright Protection Software
Open Cbox
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan