19 Apr 2014

Membuat Animasi Pada List Sidebar Dengan jQuery terbaru 2014

Jika sobat memakai framework jQuery, rasanya sayang jika dipakai hanya untuk scrol top-down, tabview section, atau toggle saja. Mungkin ada baiknya jika jQuery tersebut dimanfaatkan sebaik mungkin keberadaannya, salah satunya dengan membuat animasi pada list sidebar.

Seperti apa animasi ini, bisa dilihat hasilnya pada list-list sidebar SC Community, baik list Daftar Isi, Artikel Terbaru, Artikel Terpopuler, maupun list-list sidebar lainnya, termasuk list pada Artikel Terkait (Related Post).



Untuk membuatnya pun gampang:

  • Dari dasbor, pilih Template - Edit HTML.
  • Kemudian tambahkan kode berikut di atas 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>
     ------------------------------------------------------
    Keterangan:
    Atur ukuran paddingLeft sesuai template, karena ada beberapa template sudah menentukan ukuran padding-left pada CSS untuk list sidebar (widget-content li a)
  • Setelah itu save hasilnya lalu ucapkan Alhamdulillah...
Semoga Artikel tentang  "Membuat Animasi Pada List Sidebar Dengan jQuery terbaru 2014" ini bisa bermanfaat untuk sobat blogger semuanya. salam sukses selalu.. 
jangan lupa tinggal komentar kalian dibawah ini. OK :-)

Sumber : http://ruangsc.blogspot.com


Baca juga:


No comments:

Post a Comment