Membuat Link Bergoyang Saat di Sorot Mouse

Memperindah tampilan blog adalah hal yang penting buat anda. Salah satu tips yang satu ini adalah, membuat efek link bergerak pada saat disorot oleh mouse. Apakah anda juga tertarik untuk membuatnya ?

Disini ada 2 cara yang bisa anda coba. Yang pertama melalui Edit HTML pada template anda, dan yang kedua dengan cara menambahkan code kedalam widget. Lebih jelasnya langsung saja ikuti langkahnya dibawah :

CARA PERTAMA :

1. Login ke dashboard Blog anda
2. Kemudian pilih Template, kemudian klik Edit HTML
3. Cari Kode </head> dan letakan kode script di bawah tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>       
$(document).ready(function()  {         
$(&#39;a&#39;).hover(function() {  //mouse in         
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);         
}, function() { //mouse out         
$(this).animate({ marginLeft: 0 }, 400);         
});         
});</script>

4. Simpan template

CARA KEDUA :

Cara yang ini cukup simple, karena anda hanya cukup meng-copy kode di bawah ini dan masukan ke dalam tempat widget (Add HTML/Script)

<!--link goyang-->
<script src='http://ruki-zone.googlecode.com/files/link-goyang_www.ruki-zone.com.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
<!--link goyang-->

Kemudian save.

Cukup mudah bukan. Silahkan anda mencobanya.

Share :

Tweet

✚

Related Post