Sekarang, kita akan berguru untuk menciptakan slide show, adalah foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show dapat dipakai untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan ekonomis tempat.
Slide show dapat dipakai untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk menciptakan slide show ini sangat mudah, tidak perlu arif photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita dapat memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.
Cara Praktis Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak lalu Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan arahan 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" />
</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 Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita dapat juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita dapat menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan arahan sama menyerupai <img src="URL Foto 4" /> dan seterusnya.
7. Simpan bila sudah selesai.
Sumber https://www.kurniasepta.com/
