1 Cara Membuat Efek Link Nudging Pada Lists Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Efek Animasi Pada LinksSebelumnya saya sudah pernah mengetengahkan tutorial cara membuat efek link nudging pada lists label atau category blog. Jadi yang belum tahu apa dan bagaimana efek link nudging mungkin bisa membaca artikel sebelumnya.

Nah jika pada tutorial sebelumnya efek link nudging hanya pada lists label sekarang kita akan menambahkan efek link nudging pada semua lists sidebar blog kita, tentunya masih dengan bantuan script JQuery. Yah sangat sayang khan kalau anda hanya menggunakan framework JQuery pada blog anda untuk membuat featured posts slider, tabber tab, atau membuat scroll top down, kenapa tidak mencoba menambahkan efek link nudging atau biasanya mereka juga menyebutnya dengan efek animasi ini ke semua lists sidebar blog anda? Apalagi caranya sangat mudah kok.

  • Setelah sign ini ke akun anda
  • Pada dasbor >> pilih Template >> Edit HTML
  • Tambahkan kode berikut diatas kode </head>


<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.widget-content li a').hover(function() {
jQuery(this).animate({ paddingLeft: '7px' }, {duration:250});
}, function() {
jQuery(this).animate({ paddingLeft: '0px' }, {duration:250});
});
});
</script>

Catatan: Silahkan atur padding left sesuai template anda karena biasanya setiap template sudah menentukan ukuran padding left untuk lists sidebar. Caranya lihat pada kode CSS lists sidebar (widget-content li a)

  • Terakhir simpan template dan lihat hasilnya diblog anda.

Semoga bermanfaat.

Jika anda tidak ingin membuat efek animasi atau link nudging dengan menambahkan script JQuery, mungkin anda bisa mencoba menambahkan efek link nudging bertenaga CSS3 ke blog anda, silahkan lihat tutorialnya disini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

1 komentar :

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!