Membuat Effect JQuery Link Nudging di Blog

JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
  3. Tambahkan Script JQuery berikut diatas kode </head>

<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  ></script>

Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan 

4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>          
$(document).ready(function()  {           
$(&#39;#Label1 li&#39;).hover(function() {  //mouse in           
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
}, function() { //mouse out            
$(this).animate({ marginLeft: 0 }, 400);           
});            
});           
</script><!-- end LinkNudging --> 

5.  Terakhir Save Template anda, dan lihat hasilnya
Share this article :
 

Posting Komentar

Silahkan berkomentar bila artikel diatas bermanfaat, serta untuk kemajuan blog ini.

1. Berkomentarlah dg kata-kata yang sopan dan tidak menyinggung.
2. Jangan menyertakan link saat berkomentar.
3. NO SARA !!!! NO SPAMMM !!!

Terima kasih :)

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Danie Sharra's Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger