Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.
Slide show 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.
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:
<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 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 Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.
Artikel Terkait
Tips Blog
- Merubah Warna Background Blog Sesuai Keinginan Pembaca
- Cara Mudah Memasang Widget Revolver Maps
- Mengganti Background Blog Sesuai Resolusi Layar 100 % Work
- Cara Membuat Animasi Bergerak di Sudut Blog
- Cara Membuat Efek Foto Membesar di blog
- Cara membuat Banner Flash (swf) di Banner Maker
- Cara Upload Gambar Ekstensi Gif sekaligus pasang di Blog
- Membuat Ucapan Selamat Datang dan Selamat Tinggal di Blog
- Cara Mudah Mengganti Background Blog dengan Gambar
- Cara Membuat Scroll Box untuk Arsip Blog Sederhana
- Recent Post Gambar Bergerak Di Blog 100% Work
- Cara Upload dan mengetahui url / link Foto menggunakan Picasa ke Blog
- Cara Membuat Tulisan berjalan di Blog Keren
- Submit Sitemap Blog agar Terindex Bing dan Yahoo
- Cara Membuat Kotak Banner Iklan 125x125
- Cara Membuat Kotak Komentar Blog
- Cara Memasang Animasi di Blog
- Cara Membuat Dropdown Menu di Blogspot
- Cara Memasang Tombol Print pada Blog
- Cara Mudah Membuat Menu di Blog
- Cara Memasang Animasi di Blog
