Cara Membuat Slideshow Gambar (with jQuery)

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi :

/*--------Slide show-------------*/
.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;
}

7. Selanjutnya cari kode </head> lalu letakkan kode di bwah ini diatas kode tadi :

<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> 

8. Save
9. Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau pada Gadget Html/ Java script sesuai kebutuhan.

<div id="coin-slider">

<a href="Link target gambar" target="_blank">
<img src="URL GAMBAR ANDA" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="URL GAMBAR ANDA" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="URL GAMBAR ANDA" />Keterangan Gambar</a>

</div>

Related Post