Cara Membuat Slide Show Di Blog
Slide show gambar blogger posting dan header yang berubah-ubah atau tampilan dengan menjadi slide show, tampilan nya cukup menarik.
Ikuti langkah panduan di bawah !
1. Login akun blogger Anda.
2. Pada dashboard pilih Layout.
3. Add a gadget [ Edit HTML/JavaScript ].
4. Kemudian copy dan paste kode script dibawah.
===============================================================
<!--Slide Show--><style>
.slide { height:400px; width:100%; padding:1em; margin:1em auto; display:table; }
.slide img { margin:0 1em 0 1em; width:200px; height:200px; }
#slideshow1, #slideshow2, #slideshow3, #slideshow4 {
background:transparent;
}
</style>
<script type="text/javascript">
function startSlides(start, end, delay) {
setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
return (function() {
$('#slideshow' + frame).fadeOut();
if (frame == end) { frame = start; } else { frame += 1; }
setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 4, 5000);
</script>
<div class="slide">
<div id="slideshow1"> <img src="URL GAMBAR ANDA"/> </div>
<div id="slideshow2" style="display: none"> <img src="URL GAMBAR ANDA"/> </div>
<div id="slideshow3" style="display: none"> <img src="URL GAMBAR ANDA"/> </div>
<div id="slideshow4" style="display: none"> <img src="URL GAMBAR ANDA"/> </div>
</div><!--/Slide Show-->
=================================================================
5. Ganti alamat gambar [ url image ] dan atur kembali ukuran tampil di blog.
Posting Komentar