membuat-animasi-pada-list-sidebar.

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 siti zuriah, 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...

Ok, segitu aja sob. Semoga bermanfaat .....  

Monday, April 15, 2013