GO Blog

Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery.


buat sobat yang memasang label dengan style biasa atau could bawaan blogger, trik ini bisa di gunakan untuk menambah tampilan label sobat menjadi sedikit lebih unik walaupun tidak begitu canggih :-D...

langsung saja kita mulai bagaimana cara membuat linknudge pada label blog kita:

Pertama, pastikan template sobat sudah terpasang jquery seperti di bawah ini

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

lalu buka editor template blog sobat, jangan lupa untuk berjaga - jaga dari terjadinya kesalahan selalu backup template ketika sedang melakukan perubahan

cari kode tag </head>, gunakan ctrl+f untuk memudahkan pencarian. Kemudian copy kode di bawah ini Dan letakkan di atas kode </head>.

<script type='text/javascript'>
    var dur = 400; // kecepatan efek geser
    $(document).ready(function() {
        $('a.linknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px' // jarak kiri link label
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // penutup Jquery Script
</script>

setelah itu simpan template sobat, lalu lihat hasilnya.

trik ini bisa juga di terapkan dalam hal lain, misalnya seperti menu navigasi dan lainnya.

<nav class='menu-db-contoh'>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
</nav>

tampilan animasi tidak hanya bisa di beri efek jarak kiri tetapi bisa di tambah dengan efek tertentu jadi silahkan di kreasikan sendiri untuk apa saja dan efeknya.


demikian saja share saya kalini ini tentang membuat efek linknudge pada label blog semoga berguna dan bermanfaat...