Saturday, November 3, 2012

Cara Membuat Link Nudging Di Blog

Cara Membuat Link Nudging Di Blog - Link Nudging merupakan ling yang bergeser kekiri atau kekanan apa bila mous berada diatas link tersebut. Dalam kesempatan kali Ini Master Chef Dapur Tutorial Blogspot akan memberikan resep cara membuat link nudging tersebut. Link tersebut bisa bergerak karena Efek JQuery didalamnya.


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. Contoh pengaplikasian ini bisa anda lihat pada Halaman Daftar Isi Dapur Tutorial Blogspot.

Berikut Langkah-Langkah untuk membuat Link Nudging Di Blog.
  1. Login kehalaman blog
  2. Silahkan masuk kehalaman Edit HTML dengan cara, pada bagian Dasboard pilih Template -->Edit HTML -->Teruskan/Proses ( Baca Cara Lengkapnya mengakses halaman Edti HTML)
  3. Jangan Lupa Download Template Lengkap Terlebih dahulu untuk antisipasi kesalahan dalam edit HTML ( Baca Cara Upload dan Back-up template Blog)
  4. Setelah masuk halaman Edit HTML Cari Kode  </head>
  5. Sudah ketemu tambahkan kode berikut diatas kode </head>
  6. <script  type="text/javascript"  src="http://dapurtutorial.googlecode.com/files/Linknudging.js"  ></script>
    <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>
  7. Sekarang Klik Simpan Template
  8. Selesai dan lihat Hasilnya
Demikan gan tutorial blog kali ini mengenai Cara Membuat Link Nudging Di Blog. selamat mencoba dan semoga bisa bermanfaat.

No comments:

Post a Comment