Cara Mudah Membuat Simple SlideShow di Blog

Selamat datang di The Royal Moringa. Pada pertemuan kali ini, saya akan membahas mengenai cara pembuatan slideshow sederhana di blog/website anda. Setahu saya dulu blogger menyediakan widget slideshow yang disediakan pada menu Layout yaitu widget yang berisi kumpulan galeri foto yang ditampilkan layaknya sebuah video. Tetapi saya tidak menemukan widget ini lagi beberapa waktu yang lalu. Entah saya yang keliru atau memang tidak pernah ada widget tersebut. Oke, tidak perlu dibahas lagi masalah tadi, yang lalu biarlah berlalu...Sekarang saya akan membagikan langkah-langkah untuk menambahkan widget slideshow di blog/website anda. Sebelumnya saya menginformasikan bahwa widget slideshow yang akan anda buat kali ini akan menampilkan 4 buah slide yang berisi foto/gambar yang ingin anda pasang dilengkapi dengan jQuery effects (animasi pada slide). Berikut langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard pilih Layout > Add a gadget > Edit HTML/JavaScript

2. Kemudian copy dan paste kode script berikut. Anda tidak perlu lagi menambahkan <head> dan <body> pada script berikut karena sudah otomatis.

<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>

3. Silakan anda isi URL GAMBAR ANDA dengan alamat gambar yang ingin anda pasang. Jika gambar tersebut masih tersimpan di document, pictures, gallery, dan lain sebagainya baik itu di komputer, laptop maupun hp silakan anda upload gambar anda terlebih dahulu bisa melalui menu post/pages maupun situs upload gambar lainnya yang disediakan di internet.

4. Klik Save

Mudah dan sederhana sekali kan? Anda bisa memasang album foto diri anda bersama keluarga atau mungkin foto landscape pemandangan yang anda sukai atau juga bisa menampilkan gambar yang bertema otomotif, hewan, kuliner, dan banyak lainnya. Pada pengaturan CSS di atas bagian .slide berisi height:400px, ini adalah tinggi widget anda dan bisa anda sesuaikan dengan ukuran foto yang ditampilkan. Kemudian pada bagian .slide img ada pengaturan width dan height yaitu 200px, ini adalah ukuran gambar anda. Contoh di atas digunakan jika gambar yang anda tampilkan berbentuk persegi atau square. Anda bisa mengganti ukuran tersebut sesuai size foto yang anda pakai. Saran saya untuk mendapat hasil yang maksimal gunakan ukuran foto yang tidak terlalu besar (bukan document size tapi panjang kali lebarnya) dan keempat foto memiliki ukuran yang sama kalau bisa supaya pengaturannya gampang. Jika masih ada yang kurang jelas boleh ditanyakan. Terima kasih telah membaca!