Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 26 Mei 2010

Membuat Link Nudging

Kategori :

Membuat Link Nudging. Pada kesempatan sebelumnya saya telah memberikan Trik untuk Membuat Efek Link Dengan Jquery. Nah pada kesempatan kali ini saya juga akan menjelaskan hal yang sama seperti trik sebelumnya, namun pada kesempatan ini efek linknya berbeda dengan efek link yang sebelumnya. Kalau yang sebelumnya efek dari linknya yaitu apabila link di sentuh maka link tersebut akan redup nah kalau sekarang efeknya bergelombang seperti ombak, tetapi sama efek ini akan bekerja apabila link tersebut disentuh oleh kursor.

mungkin dengan trik ini blog sobat akan terlihat lebih cantik dan keren api cinta, soalnya efek ini bisa dibilang efek yang bagus untuk blog :). Selain tidak terlalu memberatkan blog Membuat Efek Link Nudging ini juga bagus untuk mempercantik tampilan blog sobat. Untuk melihat Demo dari efek ini sobat bisa melihat disini (lihat disebelah kiri). Sekarang kita langsung saja yuk ke langkah pembuatannya.


  1. Seperti biasa login ke blogger
  2. masuk ke Tata Letak => Edit HTML
  3. setelah itu cari kode </head> lalu tambahkan kode di bawah ini tepat di atasnya. (catatan : kalau sudah memilik kode di bawah ini, sobat tidak perlu menambahkannya lagi)

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

  4. setelah itu tambahkan kode di bawah ini tepat di bawah kode di atas

    <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 -->


    Penjelasan :
    • Label1 => perintah untuk memberikan efek pada label, sobat dapat menggantinya dengan mengambil ID dari widget yang ingin di berikan efek ini
    • marginLeft => memberitahu bahwa efek ini bergelombang dari kiri ke kanan, ini juga dapat sobat ganti dengan marginright (bergelombang ke kanan), magrintop (bergelombang ke atas), dan magrinbottom (bergelombang ke bawah).

  5. Setelah itu sobat dapat menyimpannya dah melihat hasilnya.
Bagaimana keren kan efek ini? kalau efek ini tidak berhasil sobat dapat mengganti Label1 dengan ID widget lainnya yang ingin diberikan efek link nudging. sekarang saya pamit dulu sedih. Terima kasih dan Happy blogging Joget.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

9 Komentar untuk Membuat Link Nudging

Tutorial yang bermanfaat, memperindah blog juga

Salam ukhuwah

Wahhh mantappp!!! keep Blogging ajahhh... hehhe

Wah Kerenz nie tp sayang java scriptku udah kebanyakan Sob hhe......tp makasih buat ilmu'y....Happy blogging....N Sukses slalu Sob..!!

ampuuuuuuuuuun...
js lg..


tp keren mas..

sep tutorialnya, selalu muncul tutorial menarik disini...

mau dicoba di blog dummy ku dulu ah...

Isi blognya keren gan... ijin copas ya...
sumber pasti dimuat.. thanks...

Blognya keren bos, thx buat postingannya..

http://blog.wakiteru.co.cc