Membuat Slideshow Foto Di Blog

Baru aja gua selesai buat slideshow foto di blog make jquery. lumayan lama sih gua cari info, akhirnya selesai juga.

slideshow di sini ga kaya slideshow gadget dari blogspot … liat aja ni …

ga pake lama deh … gini caranya …

1. Login dulu ke blog masing-masing http://blogger.com/home

2. Nggak pake lama langsung 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 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() { $('#coin-slider').coinslider({ width: 563, high:300, navigation: true, delay: 5000 }); }); </script>

Width: 563 sama hight: 300 bisa di sesuaikan sama gambar dan template agan2 semua. lebih bagus foto udah di resize sesuai template jadinya kode tinggal ngikutin size foto, biar keliatan bagus nantinya.

6. Simpan, kemudian klik tata letak

7. Tambahkan gadget html/java script kemudian copas kode berikut:

<div id='coin-slider'>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

</div>

Ganti yang warna kuning itu sama LINK/ALAMAT WEB yang kalo gambar di klik masuk ke LINK itu.

Ganti yang warna merah itu sama LINK GAMBAR agan2 semua.

Ganti yang warna ungu sama Deskripsi dari gambar agan.

Terus klik “save” …