List yang Menjorok

Nah, setelah membuat berbagai macam modifikasi list, seperti membuatnya bergerak dan transparan, kali ini saya akan membahas tentang cara membuat list tersebut menjorok jika pointer mouse berada di atasnya. Contohnya kamu bisa lihat di bawah ini:

• Coba taruh
  
• pointer mouse kamu
  
• di atas list ini

Caranya:

1. Masuk ke account Blogger kamu, dan pilih "Layout" - "Edit HTML",
2. Cari kode </b:skin> dan tambahkan kode di bawah ini setelah kode tersebut:
   

   <script type='text/javascript'>
   function lm_toRight(obj) {
   obj.marginValBackUp = parseInt(obj.style.marginLeft);
   obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
   }
   function lm_restore(obj) {
   obj.style.marginLeft = obj.marginBackUp.toString() + "px";
   }
   </script>
   

3. Kamu bisa mengatur seberapa jauh list tersebut menjorok dengan mengubah angka 5 jadi yang lebih besar atau lebih kecil,
   
4. Kemudian, untuk list yang kamu mau berikan efek tersebut, kamu bisa membuat tag <li> jadi:
   

   <li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>

5. Dan kalau kamu mau membuat seluruh list di blog kamu mempunyai efek seperti itu, kamu bisa menambahkan kode di bawah ini setelah kode-kode yang panjang di atas (sebelum tag </script>):
   

   function lm_loadBehavior() {
      var lis = document.getElementsByTagName("li");
      for(var i=0; i < lis.length; i++) {
          var li = lis[i];
          li.onmouseover = function(){lm_toRight(this);}
          li.onmouseout = function(){lm_restore(this);}
      }
   }
   var lm_window_onload = window.onload;
   window.onload = function() {
      if(lm_window_onload) {lm_window_onload();}
      lm_loadBehavior();
   }

Semoga bermanfaat!

Blog this!

Suka artikel dari blog ini? Silakan masukkan alamat email kamu untuk mendapatkan artikel terbaru dari Info Blog. Gratis!!
Atau baca Feed dari blog ini di sini.

Delivered by FeedBurner