Tutorial Membuat slide show foto atau gambar di blog

Pada kesempatan kali ini saya akan membahas tips cara membuat slide show foto atau gambar yang muncul secara bergantian di dalam blog sahabat masing-masing.

Persiapan awalnya silahkan upload dulu foto atau gambar sahabat di tempat upload gambar (saya sarankan yang gratis aja…he…he…), ada beberapa situs tempat upload saya sarankan tempatnya di sini karena situs ini ga ribet ini itu harus pendaftaran dulu.

Langkah-langkahnya sebagai berikut :

1. Login ke akun blogger sahabat.

2. Di dashboard plih opsi selanjutnya.

3. Klik atau pilih tata letak.

4. Pilih tambah gadget di posisi yang di inginkan sahabat.

5. Copy dan pastekan kode 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="http://s5.postimg.org/55smbojo7/merah_putih.jpg" />
 <img src="http://s5.postimg.org/tr9y232c7/3_Agustusan.jpg" />
 <img src="http://s5.postimg.org/rbcq1z9nb/badge1.jpg" />
 <img src="http://s5.postimg.org/g0a2dm2s7/badge2.jpg" />
 <img src="http://s5.postimg.org/y4d2y90gn/badge3.jpg" />
 <img src="http://s5.postimg.org/7kkhw3zx3/badge.jpg" />
 <img src="http://s5.postimg.org/90w0e92tz/IMG_20140815_141346.jpg" />

6. Klik simpan dan selesai.

Catatan kode yang diberi warna merah adalah tempat pengaturan gambar, width adalah panjang gambar dan height adalah lebar gambar.

Sedangkan yang dikasih warna pink adalah url gambar sahabat yang sudah di upload tadi.

Untuk contoh gambar slide show silahkan klik tombol DEMO di bawah ini :

DEMO

Demikian semoga bermanfaat.