516
369
0
0
The Latest
September 22, 2021
2 minute read

Cara Membuat SlideShow di Postingan Blog Secara Otomatis

Robby Jungjunan
September 22, 2021
slideshow postingan blog
Total
0
Shares
0
0
0

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.

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Robby Jungjunan
2 comments
Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Previous Article
berhemat keperluan bayi

Tips Berhemat Untuk Keperluan Bayi

September 16, 2021
Next Article
update windows 11

Update Windows 11, Bagaimana Cara Mendapatkannya?

Oktober 8, 2021
Related Posts