Anda pasti sering melihat website yang pada tampilan awalnya terdapat gambar yang gonta-ganti sendiri, bukan. Kalo dilihat-lihat sih kelihatan keren dan tidak membutuhkan space yang berlebihan untuk meletakkan gambar lebih dari satu.
Cara untuk membuat Slide Show ini cukup mudah sekali. Anda hanya menyisipkan script yang sudah saya sediakan dan isi URL image dengan gambar yang ingin anda pajang. Tapi sayang saya tidak bisa langsung membuat demo pada artikel saya soalnya template saya tidak suport. Agar suport biasanya ada script tambahan yang harus di masukkan ke blog saya dan saya malas untuk melakukan itu.
Untuk anda yang menggunakan template Johny Wuss bisa langsung jalan karena sudah langsung suport tanpa menambah script tambahan. Untuk Demonya sendiri sudah saya sediakan yaitu demo dari blog tetangga. Silahkan lihat demonya terlebih dahulu dengan mengklik tombol dibawah ini.
Bagaimana keren bukan, lebih keren lagi apabila anda terapkan sendiri pada blog anda dan lihat hasil dari gambar yang anda masukkan.
Ok, mari kita simak tutorial cara memasang gambar agar otomatis pindah sendiri tanpa anda yang melakukannya. Silahkan simak, ini cukup mudah dan silahkan terapkan pada blog anda.
1. Pertama-tama silahkan anda login terlebih dahulu pada blogger anda.
2. Buat Entri Baru atau postingan baru.
3. Pada Entri Baru silahkan pilih mode HTML, lalu masukkan script dibawah ini.
Silahkan anda ganti URL Foto dengan URL gambar yang anda punya.
<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>
4. Jika sudah selesai, anda simpan dan lihat hasilnya.
Jika tidak bisa silahkan anda googling, seperti yang saya singgung diatas bahwa tidak semua template suport dengan script ini. Yang tidak suport biasanya sepengalaman saya masih membutuhkan script tambahan untuk mendukung script Slide Show ini.
Sewaktu saya mencoba script ini ternyata berjalan lancar ketika saya coba pada template Johny Wuss. Ya mungkin memang template Johny Wuss memang dibuat untuk itu kali ya. Untuk demonya sendiri sudah saya kasi diatas dan demo ini dilakukan pada postingan lho.
Terimakasih sudah membaca, pasti bermanfaat . . . !
Tag :