Cara Membuat Gambar Slide Dengan Jquery

Bagi sobat yang ingin membuat gambar foto berjalan | slide diblog dengan bantuan script dari Jquery dengan animasi transisi atau perubahan yang bergantian tentunya sangatlah bagus untuk menambah penampilan blog anda.

Okylah .. ikuti caranya dibawah ini

1. Masuk ke blogger

2. Klik Rancangan >> Klik Edit HTML

3. Cari kode  ]]></b:skin>;Lalu copy pastekan kode dibawah ini tepat diatasnya :

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

4. Copy pastekan 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://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>

 Nb. 563 ganti sesuaikan (lebar)

5. Klik simpan

6. Klik ke Elemen halaman untuk menambah widget.,Copy paste kode script dibawah ini

<div id='coin-slider'>

<a href="ALAMAT-URL" target="_blank">        <img src="URL -GAMBAR gambar" />        <span>    Deskripsi gambar......        </span>    </a> <a href="ALAMAT_url" target="_blank">        <img src="URL-gambar" />        <span>    Deskripsi gambar......        </span>    </a><a href="ALAMAT_url" target="_blank">        <img src="URL- gambar" />        <span>    Deskripsi gambar ......        </span>    </a></div>

 Nb.Ganti alamat url dengan alamat URL anda

7. Simpan dan geser sesuai yang anda kehendaki posisinya.

Smoga berhasil ... jangan lupa kasih komentar..