-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Cara membuat Slideshow Gambar (with jQuery)

View demonya bisa dilihat disini

Untuk cara membuatnya :

  1. Login blogger
  2. Rancangan, Edit Html
  3. 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;
}

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>

Simpan template..........

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="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwannende.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwan2.jpg" />Keterangan Gambar</a>

</div>

Yang berwarna biru silahkan ganti sesuai kebutuhan.....

namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...

Selamat mencoba

Leave a Reply