Home » , » Membuat Effect JQuery Link Nudging di Blog

Membuat Effect JQuery Link Nudging di Blog

Membuat Effect JQuery Link Nudging di Blog - Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. 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>

    1. <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:

    1. <script type='text/javascript'>          
    2. $(document).ready(function()  {           
    3. $(&#39;#Label1 li&#39;).hover(function() {  //mouse in           
    4. $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
    5. }, function() { //mouse out            
    6. $(this).animate({ marginLeft: 0 }, 400);           
    7. });            
    8. });           
    9. </script><!-- end LinkNudging --> 
  5. Terakhir Save Template anda, dan lihat hasilnya
Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat :)

Description: Membuat Effect JQuery Link Nudging di Blog
Rating: 4.5
Reviewer: riz liz
ItemReviewed: Membuat Effect JQuery Link Nudging di Blog

0 komentar:

Post a Comment

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>

Mohon Berkomentarlan dengan baik sesuai dengan tema / isi posting di atas
Serta tidak mengandung PORNO,SARA,KATA2 KASAR DAN JOROK
Terima kasih atas perhatianya :)