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
...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>.1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-14<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.
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-6<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...
12 komentar
Keren sob mantapz cocok buat saya yg newbie mah
BalasHapusmaster jangan ngaku newbie :p
Hapusmakin keren ya kalau label ada efek nya ;)
BalasHapus:) begitulah mbak rini
HapusTahu modelnya tapi gak tahu namanya, hehe :D
BalasHapusTapi sekarang jadi tahu mas :)
haha sama berarti saya juga gak tau :D
HapusTapi kan duluan mas Dafin tahunya :D
Hapusmati gimana sob, blog ini pake jquery scroll kalo mousenya di solot ke iframe komentar ya tidak jalan walau di scroll :D
BalasHapuswah keren nih mas, boleh di coba simpan dulu kodenya
BalasHapuslangsung saja sob :)
HapusSaya baru tahu kalau namanya itu linknudge.
BalasHapusbegiluhlah kang namanya :D
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>