Cara mudah Membuat Slide Show Di Blog

Cara Mudah Membuat Slide Show pada gambar / benner dengan JQuery - Apa itu slide show...? slide show adalah suatu tekhnik merubah gambar ke gambar  yang lain pada satu tempat.  hal ini di lakukan dengan alasan untuk mempercantik blog agar tidak terlihat kaku. jika anda ingin mencoba tekhnik ini, Silahkan Ikuti Langkah - langkah berikut :

1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
2. Langsung manuju 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 tepat diatas kode </head>

<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: 563, high:300, navigation: true, delay: 5000 }); }); </script>

Width : 563 : high : 300 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 menuju ke tata letak
7. Tambahkan gadget html/java script kemudian copas kode berikut:

<div id='coin-slider'>

<a href="Link_url" target="_blank">
<img src="link letak gambar" />
<span>

Deskripsi gambar......

</span>
</a>

<a href="Link_url" target="_blank">
<img src="link letak gambar" />
<span>

Deskripsi gambar......

</span>
</a>

<a href="Link_url" target="_blank">
<img src="link letak gambar" />
<span>

Deskripsi gambar......

</span>
</a>

</div>

Silahkan ganti Yang saya beri warna Biru dengan selera dan kebutuhan blog anda, Link adalah letak gambar dengan lokasi penyimpanan gambar anda. Jika semuanya benar, kamu akan mendapatkan Slide gambar yang keren di blog anda. Selamat mencoba...!