Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang
ditampilkan secara bergantian dengan otomatis.Slide show bisa digunakan untuk
menampilkan foto liburan yang banyak, atau memajang foto-foto produk. 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.
Cara Mudah 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:
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 Poto 1" />
<img src="URL Poto 2" />
<img src="URL Poto 3" />
<img src="URL Poto 4" />
</div>
<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 Poto 1" />
<img src="URL Poto 2" />
<img src="URL Poto 3" />
<img src="URL Poto 4" />
</div>
5. Ganti URL Poto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Poto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.
No comments:
Post a Comment