Minggu

Cara membuat link bergoyang di Blog

Biasa disebut link nudging atau nudge, namun bagi para blogger yang awam pasti tidak tau efek tersebut, yang mereka tahu bahwa link tersebut akan bergoyang atau bergerak ke kiri saat dikunjungi mouse atau pointer. nah, kali ini infonetmu akan memberi tutorial singkat agar link bisa bergoyang dombret kayak inul daratista, he he he..:)

membuat link bergoyang,link nudging


Langsung Saja ke pokok bahasan tentang cara membuat link bergoyang di blog, ikuti langkah-langkah dibawah ini!

  1. Login ke akun blogger sobat
  2. Masuk ke rancangan/design
  3. Pilih Tata Letak
  4. Edit HTML
  5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
    $('a.linknudge').hover(function() {
    $(this).animate({
    paddingLeft: '25px'
    }, dur);
    }, function() {
    $(this).animate({
    paddingLeft: 0
    }, dur);
    });
    }); // end of Jquery Script
    </script>
  6. Simpan template kamu.

Keterangan:
  • Yang berwarna merah adalah jarak gerak link untuk bergoyang,atur sesui yang kamu inginkan..jangan panjang-panjang ya ngebornya,, hiks hiks hiks..
  • Bagi yang sudah memasang script jquery
    http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
    tidak perlu memasangnya lagi.
  • Jika kamu ingin membuat link yang kamu inginkan bergoyang maka tambahkan kode dibawah yang berwarna merah pada link kamu. atau Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat seperti contoh dibawah ini:
    <a class='linknudge' href='http://infonetmu.blogspot.com/'>INFONETMU</a>
  • Cara atau kode di atas adalah untuk link kostum, dengan menambahkan kode class 'linknudge'.
    Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
    $('a.linknudge, .Label ul li a').hover(function() {
    $(this).animate({
    paddingLeft: '25px'
    }, dur);
    }, function() {
    $(this).animate({
    paddingLeft: 0
    }, dur);
    });
    }); // end of Jquery Script
    </script>
    Demikian cara membuat link bergoyang di blog atau link nudging, semoga berhasil..