Piepin's Blog

Suka artikel ini:

Nivo Slider adalah tool javascript jQuery yang berguna untuk menampilkan animasi image slide dengan berbagai efek. Kalau kita berkunjung ke website portal berita, sering kita jumpai berita dalam bentuk gambar yang tampil berurutan dalam animasi slide show, nah untuk membuat animasi seperti itu, kita bisa menggunakan Nivo Slider.

Nivo Slider sudah tersedia dalam bentuk plugin untuk WordPress, Joomla, Drupal, dll. Tetapi kalau anda membuat website tidak menggunakan CMS tersebut, alias membuat desain sendiri, maka langkah-langkah untuk memasang image slider menggunakan Nivo Slider adalah sbb:

1. Download Nivo Slider pada halaman ini:
   http://dev7studios.com/wp-content/plugins/download-monitor/download.php?id=36

2. Extract file .zip dan simpan pada folder web
   

3. Pasang kode ini pada bagian HEAD:

   <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

4. Pasang kode ini pada bagian BODY:
   

   <div id="slider">
       <img src="images/gambar1.jpg" alt="" />
       <img src="images/gambar2.jpg" alt="" />
       <img src="images/gambar3.jpg" alt="" />
   </div>
   <!-- sesuaikan dengan gambar yang ada -->

5. Tambahkan kode ini pada bagian HEAD:

   <script type="text/javascript">
   $(window).load(function() {
       $('#slider').nivoSlider();
   });
   </script>

Efek transisi dapat dimodifikasi sendiri, baik gayanya maupun kecepatan transisi. Untuk melihat penjelasan lebih detail mengenai konfigurasi Nivo Slider, silahkan melihat panduan lengkap di website Nivo Slider.

Incoming search terms for the article:
nivo slider, nivoslider, cara menggunakan Nivo slider, jQuery Nivo Slider, nivo slider joomla, nivo slider tutorial, memasang slideshow di joomla, download nivo slider, membuat nivo slider, cara pasang nivo slider, memasang nivo slider, nivo-slider, membuat slideshow di joomla, cara memasang slideshow di joomla, cara pasang nivo slider prestashop, animasi slideshow dengan jquery, cara memasang Nivo Slider, cara pasang slideshow di joomla, jquery nivo slider pack, membuat image slider, menampilkan gambar slideshow pada joomla, nivo slide, nivo slider for joomla, nivo slider jquery, pasang nivo slider, cara install nivo slider, cara install nivo slider di prestashop, cara mengaktivkan plugin slider wp, cara pasang jquery slideshow di web, image slider javascriptRelated Posts:

No related posts.