Cara Membuat Efek Slideshow Pada Gambar (With jQuery)

Home » Tips Blogging » Cara Membuat Efek Slideshow Pada Gambar (With jQuery)

Cara Membuat Efek Slideshow Pada Gambar (With jQuery)

Posted by Jemari Menari Selasa, 17 April 2012 2 comments

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 bawah 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() { $('#coin-slider').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