Slide show istilah yang biasa digunakan untuk menampilkan foto atau image. Untuk membuat slide show di blog bisa memanfaatkan post blogger, Picasa, Photobucket, sebagai media URL photo yang akan ditampilkan pada slide.
Berikut tahapan Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut 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 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
<img src="URL Foto 5" />
</div>
6. Untuk menyesuaikan tinggi dan lebar foto (height) agar sesuai dengan blog bisa di Edit dibagian.
#content-slider {
position: relative;
width: 100%; ( lebar image)
height: 250px; (tinggi image)
overflow: hidden;
margin:0 auto;
7. Untuk menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dibawahnya
8. Save jika sudah selesai.
9. Lihat Tampilan diblog
0 komentar:
Posting Komentar