TUTORIAL & DOWNLOAD: SLIDE

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59hSeuw_G3DZEqXtZXPXFqwAxdV3C0XYZf58qibJNxPM1bRFx9yhctQIkYQRKL6weTvKSemjFEMNNyZW2lUfd-zcBkEUcBcaohzHODmyB-qbdkRAMnJhQeaSzjdRNYuhysy7YrWMHScM/s200/photo-slideshow.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59hSeuw_G3DZEqXtZXPXFqwAxdV3C0XYZf58qibJNxPM1bRFx9yhctQIkYQRKL6weTvKSemjFEMNNyZW2lUfd-zcBkEUcBcaohzHODmyB-qbdkRAMnJhQeaSzjdRNYuhysy7YrWMHScM/s200/photo-slideshow.gif" width="393" /></a>Sebuah halaman blog yang tidak ada sentuhan <a href="http://kurniasepta.blogspot.com/2013/03/membuat-widget-recent-photo-tumblr-di.html" target="_blank">foto atau gambar</a>
 akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak 
akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga 
bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar 
daripada tulisan. 
 
Sekarang, kita akan belajar untuk membuat <a href="http://kurniasepta.blogspot.com/2011/04/membuat-slide-recent-post.html" target="_blank">slide show</a>,
 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 <a href="http://kurniasepta.blogspot.com/2012/08/download-template-blogspot-bargaya-toko.html" target="_blank">toko online</a>.
 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: 
 
 
<div class="alert">
<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> </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.

Cara Mudah Membuat Slide Show Foto di Blog

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan l...

Baca selengkapnya »