MEMBUAT IMAGE SLIDER DI BLOG

Nah, disore yang cerah dan habis hujan-hujan ini aku mau posting tentang bagaimana caranya membuat image slider atau image slideshow seperti yang ada pada homepage blog saya. Sebenarnya caranya cukup mudah...

Sambil nikmatin secangkir Top Coffee "BONGKAR" di sore yang dingin mantab banget... haha...

oke langsung saja ke TKP...

begini caranya :

1. login blogger seperti biasa

2. langsung masuk template >> edit HTML

3. cari code ini ]]></b:skin> setelah ketemu pastekan CSS berikut di atas ]]></b:skin>

<style type="text/css">
/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */
.coin-slider {
 overflow: hidden; zoom: 1; position: relative; margin-top:25px; margin-left:50px;
 }
.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;
}
</style>

4. selanjutnya cari kode penutup </head> lalu copas kode berikut di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://vittoproject.googlecode.com/files/coin-slider.js' type='text/javascript'/>

<script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 900, height:500, navigation: true, delay: 5000 }); }); </script>

Catatan : kode berwarna merah silahkan ganti sesuai ukuran gambar kalian

5.  simpan template, lalu pindah ke tata letak >> add gadget lalu copas kode berikut

<a href="link tujuan kalian" target="_blank">
<img src="alamat gambar kalian" />
</a>

<a href="link tujuan kalian" target="_blank">
<img src="alamat gambar kalian" />
</a>

<a href="link tujuan kalian" target="_blank">
<img src="alamat gambar kalian" />
</a>

<a href="link tujuan kalian" target="_blank">
<img src="alamat gambar kalian" />
</a>
</div>

Catatan : ganti kode wana biru dengan url yang dituju dan url gambar kalian

sekian tutorial untuk sore ini... semoga bermanfaat... GOOD LUCK :)