Membuat Slide Show Gambar dengan JQuery

Okey, langsung saja silahkan anda ikuti tutorial berikut:

1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
3. Beri centang pada expand Template widget
4. Letakkan kode berikut di atas kode ]]></b:skin>
   

   /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

5. Letakkan kode dibawah ini diatas kode  </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>

   Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat.
6. Simpan, kemudian klik tata letak 
7. Tambahkan gadget html/java script kemudian copas kode berikut:
   

     <div id='coin-slider'>
   
   <a href="imgN_url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
      
   <a href="imgN_url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
   
   <a href="imgN_url" target="_blank">
           <img src="link letak gambar" />
           <span>
       Deskripsi gambar......
           </span>
       </a>
   
   </div>

   Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
   
8.  Simpan dan silahkan nikmati hasilnya.

Demo : Lihat gambar disini....



Baca Juga Artikel Terpopuler :

• Sejarah CorelDraw dan Perkembangannya
• Astrid Ellena, Miss Indonesia 2011
• Operasi Keperawanan Dewi Persik
• Menikmati Sex Yang Aman Saat Hamil
• Letusan Gunung Terdasyat Di Dunia
• Ingin Tahu AI-Qur'an Itu Apa ?
• Menerapkan SEO Pada Gambar Postingan
• Dari Dapur, Wanita Menuju Surga
• Cinta Kasihku Kepada Rasulullah SAW
• GRATIS !!! Submit untuk meningkatkan pengunjung blog/website Anda.