image slideshow

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 blogHendriono 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.

Screenshot diambil dari Hendriono Online

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:

]]>

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:

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

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):

URL-TUJUAN">URL-GAMBAR" alt="JUDUL-GAMBAR" />

JUDUL-KETERANGAN
ISI-KETERANGAN





URL-GAMBAR" alt="JUDUL-GAMBAR" />

JUDUL-KETERANGAN
ISI-KETERANGAN

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:

URL-TUJUAN">URL-GAMBAR" alt="JUDUL-GAMBAR" />

JUDUL-KETERANGAN
ISI-KETERANGAN





URL-GAMBAR" alt="JUDUL-GAMBAR" />

JUDUL-KETERANGAN
ISI-KETERANGAN

Langkah 4
Simpan Gadget dan preview blog...

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
• sampai dengan kode
dibawah kode dan sebelum kode
(Perhatikan kode disinilah kita menambahkan gambar baru).

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