Photo Slider With Caption Tutorial

On: 14.01 By: Andreansyah Dwiwibowo 0 comments

 

Hm.. Untuk menghilangkan badmood yang sedang melanda, saya mau coba menepati janji sapa para anggota ஜ۩۩ஜ "ISLAMIC COMPUTER" ஜ۩۩ஜ. Soalnya saya dulu pernah bilang, saya akan membuatkan tutorial untuk membuat Photo Slider With Caption, yaitu slide show photo yang ada keterangannya, jadi nggak cuma gambar. Sebelumnya saya sudah membuat tutorial Membuat Slide Photo Dengan Smoothdivscroller, slide itu hanya menampilkan gambar saja, tidak ada keterangannya. Nah, kali ini kita bisa memberikan keterangan untuk setiap gambarnya, hasilnya akan seperti Galeri Foto Bai Fang Li. Ok, kita langsung ke tutorial.

1. Login ke akun blogger, dan langsung menuju Edit HTML.

2. Cari tag </head> dan letakkan (copy paste) kode berikut di atasnya.

<!--slide caption-->
<script src='http://www.queness.com/resources/html/slideshow2/js/jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://biardapetlike.googlecode.com/files/js%20caption.js' type='text/javascript'/>
<style type='text/css'>body{font-family:arial;font-size:12px;}ul.slideshow{list-style:none;width:450px;height:300px;overflow:hidden;position:relative;margin:0;padding:0;}ul.slideshow li{position:absolute;left:0;right:0;}ul.slideshow li.show{z-index:500;}ul img{border:none;}#slideshow-caption{width:450px;height:70px;position:absolute;bottom:0;left:0;color:#fff;background:#000;z-index:500;}#slideshow-caption .slideshow-caption-container{padding:5px 10px;z-index:1000;}#slideshow-caption h3{margin:0;padding:0;font-size:14px;}#slideshow-caption p{margin:5px 0 0 0;padding:0;}</style>
<!--habis-->

3. Save Template. Pemasangan javascript dan CSS selesai. Selanjutnya kita tinggal membuat postingan yang akan menggunakan slider itu.

4. Buat postingan baru. Masuk mode HTML dan gunakan kode berikut.

<ul class="slideshow">
<li class="show"><img alt="Keterangan 1" height="300" src="link gambar 1" title="Judul 1" width="450" /></li>
<li><img alt="Keterangan 2" height="300" src="link gambar 2" title="Judul 2" width="450" /></li>
<li><img alt="Keterangan 3" height="300" src="link gambar 3" title="Judul 3" width="450" /></li>
</ul>

5. Height dan width jangan di ganti, karena nanti gambar tidak akan terlihat full.

6. Publikasikan postingan dan selesai.

Sekian tutorial membuat Photo Slider With Caption dari saya. Tulisan ini bukan hasil copas, 100% dapet nulis sendiri. Referensinya dari Quennes. Oh ya, cara ini khusus untuk pengguna blogspot.