Membuat Semua Link Bergoyang dengan jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar - Membuat Link Bergoyang di Blog dengan jQuery. Alhamdulillah pada pagi yang sangat dingin ini saya akan menulis artikel Cara Membuat Link Bergoyang / Link Nudging di Blog dengan jQuery.

Pada artikel saya sebelumnya saya menulis artikel tentang Cara Menampilkan Kode HTML di Artikel Blog mungkin saja sobat blogger yang belum tahu caranya bisa membaca artikel tersebut pada halaman Menampilkan Kode HTML Pada Artikel. Selanjutnya kembali pada artikel sekarang tentang Link Nudging. Mungkin sobat blogger bertanya-tanya apa sih link nudging itu?... Link Nudging adalah sesuatu dimana sebuah link atau tautan mendapatkan event hover atau pada saat di sorot cursor mouse, maka link tersebut akan bergerak ke kanan, dan jika tautan tersebut dijauhi oleh kursor maka tautan tersebut akan kembali lagi seperti semula.

Daripada berlama-lama mari kita mulai tutorial tentang Cara Membuat Link Bergoyang / Link Nudging di Blog dengan jQuery.

demo

Hanya test 1
Hanya test 2
Hanya test 3

Memasang Framework jQuery

1. Silahkan sobat masuk ke akun blogger
2. Jika sudah maka masuk ke Edit HTML
3. Tambahkan Framework jQuery pada template blog sobat.
   Jika pada template sobat sudah terdapat framework jQuery, maka abaikan saja langkah memasang framework jQuery. Namun jika pada template sobat belum terdapat framework jQuery maka silahkan cari kode di bawah ini

</head>

4. Kemudian sobat salin kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

5. Dan letakkan sebelum kode ini

</head>

6. Sampai disini pemasangan framework jQuery telah selesai.
   Simpan template sobat

Memasang Javascript

1. Masih pada Edit HTML
, silahkan sobat cari kode di bawah ini

</head>

2. Kemudian sobat salin kode di bawah ini

<script type='text/javascript'>        
$(document).ready(function()  {
  $(&#39;a:link&#39;).hover(function() {
    $(this).animate({ marginLeft:  &#39;10px&#39; }, 250);
  }, function() {
    $(this).animate({ marginLeft: 0 }, 250);
  });          
});         
</script>

3. Dan letakkan sebelum kode ini

</head>

4. Simpan template sobat

Sekian pada tutorial Membuat Link Bergoyang di Blog dengan jQuery. Silahkan sobat cek pada blog sobat, jika ada kesulitan atau ada keluhan silahkan sobat meninggalkan komentar pada akhir artikel ini.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait