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>
Silahkan di sesuaikan yang sudah saya beri keterangan sesuai keinginan anda atau serasi dengan template milik blog sobat
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...