16 Menambahkan Effect JQuery Link Nudging Pada Label

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

link-nudgingJQuery 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. Seru juga jadinya, tertarik ingin menerapkan JQuery Link Nudging pada blog anda?

Silahkan ikuti tutorial menambahkan effect JQuery link nudging berikut ini:

1. Setelah sig in pada account blogger anda >>> pada dasbor>>> Klik Rancangan>>> Edit HTML
2. 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: abaikan langkah kedua bagi anda yang sudah menginstal script JQuery diatas pada template blogger anda.

3. 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 -->
4. Simpan, dan lihat hasilnya pada blog anda.

Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
Resource David Wals

Ingin mencoba effect lain pada link? Silahkan lihat disini cara membuat link hover berwarna pelangi atau disini link hover bertabur bintang


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

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

16 komentar :

  1. weis hebat nih! jadi seperti link dropdown? akan saya coba! alhamdulillah ^^

    BalasHapus
  2. Keren, lucu, dan mantap. Setelah saya coba, eh... langsung berhasil, lagi pula scriptnya sedikit.
    Terima kasih Ukhti.

    BalasHapus
  3. Best Tutorial,jadinya semua saya bikin bergoyang..Thanks full !!adibaskom

    BalasHapus
  4. Mantab...Goyang dangdut.Tapi bikin berat blognya gak nich?

    BalasHapus
  5. buat wordpress gk bisa ya mbak?
    udah di coba tp gk berhasil.. ;(

    BalasHapus
  6. @ Suparyanto: Sy kira tidak, scriptnya sgt sedikit dan sederhana.

    @ Masyhury: Tutorial diatas dan semua tutorial disini untuk blogger. Sy blm mempelajari wordpress. Maaf mngkn pd ksmpatan lain.

    @ all: terimakasih apresiasinya.

    BalasHapus
  7. hmmmm...btw,,mau tuk link yo

    BalasHapus
  8. ini dikiri..kok g ngefek ya??

    BalasHapus
  9. emang deh kl pake jquery semuanya bakalan bagus , walaupun blog sederhana tapi bakalan bikin orang kagum, thanks yah buat tutorialnya

    BalasHapus
  10. Makasih mas ndro ilmunya....nambah2 pengetahuan sedikit nih mas ndro...

    BalasHapus
  11. makasih gan.. jadi cantik jadinya kalau di kasih kode ini za.. thks berat za

    BalasHapus
  12. boleh tukar link nih, link anda sudah duduk manis di sidebar ane, silahkan dicek, thanks atas kerjasamanya

    BalasHapus
  13. thenkyu sob inform'e....

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!