Cara Membuat SlideShow di Postingan Blog Secara Otomatis

Slideshow Postingan Blog - Penambahan sedikit fitur seperti media gambar, dokumen, video kedalam postingan di blog sangat membantu dalam pembuatan konten yang lebih lengkap dan sempurna. Tapi, apabila terlalu banyak gambar misalnya dalam artikel tentu akan memakan banyak sekali ruang yang bisa saja malah membuat pembaca merasa terganggu. Dengan membuat slideshow pada postingan blog, media yang dimasukkan seperti gambar dan file akan terlihat lebih rapi.



Apa itu SlideShow?

Slideshow adalah tampilan dari beberapa objek gambar, halaman dokumen, dan lainnya yang ditampilkan secara bergantian secara otomatis dalam beberapa saat ataupun bisa juga dilakukan secara manual. Saya rasa kamu sering menemui slideshow di website-website yang menampilkan konten dokumen makalah, penelitian, jurnal dan lainnya. Ataupun gambar yang berada di konten resep masakan.


Kapan Kita Memerlukan Slideshow di Postingan Blog?

Ketika kamu merasa bahwa gambar yang akan dimasukkan terlalu banyak sehingga memakan banyak ruang di postingan blog. Akibatnya, artikel akan menjadi panjang bukan karena konten tapi karena gambar. Dan itu cukup buruk jika terjadi.

Slideshow ini akan cocok sekali jika dipasang pada konten tutorial, konten resep, ataupun konten yang harus menyematkan dokumen. Tapi pada akhirnya tergantung dari kebutuhan konten yang kamu buat. Jika dirasa perlu ya gunakan saja slideshow di postingan blog.


Cara Membuat SlideShow Gambar di Postingan Blog


1. Silahkan masuk ke dashboard blogger
2. Pergi ke artikel/halaman yang ingin dimasukkan slideshow
3. Ubah mode ke HTML
4. Silahkan copy script dibawah ini dan pastekan diarea yang diinginkan.

<style>
.slide {     height:200px;     width:100%;     padding:1em;     margin:1em auto;     display:table; }
.slide img { margin:0 1em 0 1em; width:400px; height:400px; }
#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"/>     </div>
<div id="slideshow2" style="display: none">     <img src="Url Gambar"/>     </div>
<div id="slideshow3" style="display: none">      <img src="Url Gambar"/>     </div>
<div id="slideshow4" style="display: none">      <img src="Url Gambar"/>     </div>
</div>

Keterangan:

#slideshow1,......,.......,#slideshow4,....... silahkan sesuaikan dengan jumlah gambar yang akan dimasukkan. Jika ingin menambahkan silahkan tambahkan #slideshow5.

startSlides(1, 4, 5000). Angka 1 disana sebagai tampilan awal slide nya yaitu gambar urutan ke satu. Angka 4 menunjukan slide terakhir yaitu gambar ke 4 (jika kamu ingin memasukkan 3, 5, 10 gambar ya berarti ubah aja angka 4 nya sesuai jumlah gambar yang akan dimasukkan). 5000 adalah waktu perpindahan dari slide ke slide, 5000 menunjukkan 5 detik.

Silahkan ubah Url Gambar dengan link gambar yang akan dimasukkan. 

5. Kini membuat slideshow di postingan blog telah selesai. Perpindahan setiap slide menggunakan efek FadeIn dan FadeOut.

Mudah banget kan membuat slideshow di blogger. Apabila ada yang ingin ditanyakan seputar slideshow blog silahkan tulis dikolom komentar ya guys.

im

0 Komentar