Membuat Tampilan Gambar Slide (jQuery s3Slider)

Image Slide Show akan membuat tampilan blog menjadi indah dan lebih terlihat profesional, karena gambar akan tampil bergantian dengan efek fade yang sangat halus dan keterangan gambar akan tampil bergantian pula seiring perubahan gambar dengan efek slide. Tampilan seperti ini sangat cocok sebagai suatu gambaran informasi sederhana mengenai blog lain, atau bahkan bisa digunakan untuk ruang iklan bagi blogger yang memiliki ruangan (space) iklan terbatas.

Image slide show atau tampilan gambar slide sangatlah mudah kita terapkan pada blogger, hanya perlu beberapa langkah dalam pemasangan script code image slide show pada Blog*Spot. Sebelum artikel ini dibuat, Blogger TuneUp telah menerapkannya pada blog Hendriono Online, jadi silahkan diperhatikan dulu apakah memang perlu atau tidak kita memasangnya di blog kita, karena script code ini cukup lumayan menambah beban loading blog.

Demo jQuery S3 Slider

Memasang jQuery Image Slide Show

CARA 1
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini tepat diatas langkah 3:

#slider {width: 380px; height: 250px; position: relative; overflow: hidden;}
#sliderContent {width: 380px; position: absolute; top: 0; margin-left: 0;}
.sliderImage {float: left; position: relative; display: none;}
.sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif;  text-align:justify; color: #fff; padding: 10px 10px; width: 360px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none;}
.clear {clear: both;}
.sliderImage span strong {font-size: 12px;}
.slide_atas {top: 0; left: 0;}
.slide_bawah {bottom: 0; left: 0;}
#sliderContent ul {list-style-type: none; float: left; margin: 0px; padding: 0px;}
#sliderContent li {list-style: none; margin: 0px;padding: 0px;}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode dibawah ini tepat diatas langkah 5 (baca keterangan):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://s3slider-original.googlecode.com/svn/trunk/s3SliderPacked.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#slider')
.s3Slider({timeOut: 4000});
});
</script>

Langkah 7
Simpan Template
Langkah 8
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 9
Tambahkan Gadget Baru dengan tipe "HTML/JavaScript"
Langkah 10
Masukan kode dibawah ini pada gadget baru tersebut (Langkah 9):

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="URL-TUJUAN"><img src="URL-GAMBAR" alt="JUDUL-GAMBAR" /></a>
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br/>ISI-KETERANGAN</span>
</li>
<li class="sliderImage">
<img src="URL-GAMBAR" alt="JUDUL-GAMBAR" />
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br/>ISI-KETERANGAN</span>
</li>
<!--Disini untuk menambahkan-->
<div class="clear sliderImage"></div>
</ul>
</div>

Langkah 11
Simpan Gadget dan Preview Blog (Baca keterangan)

CARA 2
Cara ini paling sederhana dan cepat, ikuti langkahnya:
Lihat cara 1 dan mulai dari langkah 8...
Langkah 1
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 2
Tambahkan Gadget Baru dengan tipe "HTML/JavaScript"
Langkah 3
Masukan kode dari cara 1 langkah 4, langkah 6 langkah 10 menjadi satu sehingga akan menjadi seperti dibawah ini:

<style type="text/css" media="screen">
#slider {width: 380px; height: 250px; position: relative; overflow: hidden;}
#sliderContent {width: 380px; position: absolute; top: 0; margin-left: 0;}
.sliderImage {float: left; position: relative; display: none;}
.sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif;  text-align:justify; color: #fff; padding: 10px 10px; width: 360px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none;}
.clear {clear: both;}
.sliderImage span strong {font-size: 12px;}
.slide_atas {top: 0; left: 0;}
.slide_bawah {bottom: 0; left: 0;}
#sliderContent ul {list-style-type: none; float: left; margin: 0px; padding: 0px;}
#sliderContent li {list-style: none; margin: 0px;padding: 0px;}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://s3slider-original.googlecode.com/svn/trunk/s3SliderPacked.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#slider')
.s3Slider({timeOut: 4000});
});
</script>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="URL-TUJUAN"><img src="URL-GAMBAR" alt="JUDUL-GAMBAR" /></a>
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br />ISI-KETERANGAN</span>
</li>
<li class="sliderImage">
<img src="URL-GAMBAR" alt="JUDUL-GAMBAR" />
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br />ISI-KETERANGAN</span>
</li>
<!--Disini untuk menambahkan-->
<div class="clear sliderImage"></div>
</ul>
</div>

Langkah 4
Simpan Gadget dan preview blog...

Unduh jQuery S3 Slider

Keterangan:

• Bagi blogger yang sudah memasangan efek Page Peel, maka tidak perlu memasang lagi jquery.js pada tips kali ini.
• Simpan file JavaScript ini; jquery.js, s3Slider.js (klik kanan save as) pada hosting anda dan ubah URL-nya.
• Lihat Cara 1 Langkah 4; width: 380px; height: 250px; (baris 1), width: 380px; (baris 2), dan width: 360px; (pada baris berikutnya), angka-angka tersebut diubah untuk menyesuaikan dengan lebar dan tinggi gambar, maka harus diperhatikan juga ukuran gambar yang akan kita gunakan.
• Lihat Cara 1 Langkah 6; ubahlah LINK-URL sesuai dengan alamat file tersebut yang telah anda tempatkan.
• Lihat Cara 1 Langkah 6; timeOut: 4000 adalah waktu yang diperlukan untuk pergantian antar gambar, ubahlah nilai 4000 sesuai keinginan anda, satuan waktunya milidetik.
• Lihat Cara 1 Langkah 10; URL-GAMBAR; ganti dengan url gambar anda; JUDUL-GAMBAR; ganti dengan judul gambar; JUDUL-KETERANGAN; ganti dengan judul keterangan tentang gambar; ISI-KETERANGAN; ganti dengan keterangan atau informasi sesuatu yang ingin anda sampaikan kepada pengunjung; URL-TUJUAN; diisi dengan link tujuan jika gambar di klik.
• Jika kita menggunakan Cara 2 maka perubahan yang harus dilakukan sama dengan perubahan yang dilakukan pada Cara 1.
• Jika kita menggunakan Cara 2 maka perhatikan penambahan kode yang berwarna biru bergaris bawah.
• Kode diatas hanya terdiri dari dua gambar, jika kita ingin menambahkan kode dari <li class="sliderImage"> sampai dengan kode </li> dibawah kode </li> dan sebelum kode <div class="clear sliderImage"></div> (Perhatikan kode <!--Disini untuk menambahkan--> disinilah kita menambahkan gambar baru).
• Slider ini dibuat oleh serie3.info

Mudah-mudahan berhasil, tinggalkan pesan jika terjadi gagal pemasangan... Happy blogging :)