Cara Menapilkan Slide Show Photo Pada Sidebar Blog

Tampilan blog yang bagus sudah tentu menjadi impian semua blogger, akan tetapi terkadang kita bingung bagaimana caranya untuk memperindah tampilan blog kita kuhsus untuk para pemula. Sebenarnya tampilan blog yang simple & dinamis yang lebih disukai oleh reader atau pembaca. Akan tetapi jauh lebih bagus bila kita mempunyai ciri khas pada blog kita yang mebedakan antara blog lain nya, salah satunya bisa dengan cara membuat wigdet slide show photo yang berisi foto-foto kita pada sidebar blog.

Widget ini berisi foto-foto kita yang akan tampil secara bergantian secara otomatis dan bisa di atur sedemikian yang kita ingikan. Memasang widget ini jauh lebih praktis & menghemat tempat daripada menyimpan foto di widget 'Gambar/Picture', karena semua foto-foto kita bisa tampil bergantian secara slide hingga tampak seperti menonton sebuah video & ini hanya butuh 1 space aja gen!


Slide show juga bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Mau pasang pasang widget slide show photo ini di blog anda?
Caranya sebenarnya mudah kok, disini saya akan jelaskan bagaimana caranya memasang widget slide show photo secara step-by-step ok langsung ke tkp bray....

Cara memasang slide show photo di sidebar Blog:

1.Login ke blogger seperti biasanya.

2.Masuk ke dashboard blog anda, lalu Pilih opsi 'Tata Letak'. 

3. Klik 'Tambahkan Gadget' lalu akan keluar pop-up, Pilih HTML/JavaScript.

4. Beri judul di kolom judul, lalu masukan kode HTML ke dalam kotak konten seperti berikut ini:

Anda tinggal copy-paste kode HTML dibawah ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto anda" />
<img src="URL Foto anda" />
<img src="URL Foto anda" />
<img src="URL Foto anda" />
</div>


5. Ganti tulisan berwarna merah "URL FOTO 1/2/3/4" dengan url foto anda yang telah di host atau di upload ke website album foto online seperti photobucket / picasa / flicker, dll.

6. Anda bisa menambahkan sebanyak mungkin foto yang anda mau, tinggal menambahkan saja kode HTML URL FOTO nya.

7. Anda bisa mengedit tinggi & lebar dari foto tersebut. Kode HTML yang saya berikan cocok untuk sidebar blog berukuran 250 pixel atau lebih. Anda dengan mengganti kode HTML berwarna biru dengan ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda.

NB :-Silahkan masukkan URL Foto Anda, Bagaimana caranya nyari URL Foto? Gampang Bro, silahkan Upload Gambar2 anda yang akan di masukkan ke Slide Show Foto ke Blog anda, setelah terupload semua, Sorot cursor anda ke Gambar pertama, lalu klik kanan, lalu klik Copy URL Image. Nah itu Namanya URL Foto Anda yang pertama. Lalu lakukan seperti itu ke Foto anda berikutnya.

- Kalau slide photo tidak jalan, coba di cek kembali kode HTML nya, pastikan kode sudah benar sesuai dengan contoh di atas. Bila masih tidak jalan, cek juga jaringan internet anda, karena kalau sinyal internet kurang bagus slide photo sering ngambek gak mau jalan. Masih gak jalan juga? mungkin Anda kurang beramal, hahaha.