Membuat Spoiler di Blogger

Spoiler merupakan sebuah cara untuk menyembunyikan sebagian atau keseluruhan dari isi sebuah blog / web. Tujuannya untuk menghemat space atau sering kali digunakan untuk mempercepat loading sebuah halaman. Karena sesuatu yang disembunyikan menggunakan spoiler tersebut tidak ikut ter-load saat pertama kali halaman tersebut dibuka dan baru ter-load pada saat spoiler tersebut dibuka.

Biasanya spoiler digunakan untuk menyembunyikan gambar. Meskipun gambar merupakan elemen penting pada sebuah blog / web, terutama yang berisikan tutorial untuk memperjelas panduan demi panduan. Hanya saja bagi user yang berada di daerah susah sinyal, gambar menjadi kendala dalam membuka sebuah halaman blog / web. Tapi jika gak menampilkan gambar, blog / web tutorial akan mengalami penurunan pembaca. Di sini spoiler menjadi berguna.

Untuk membuat spoiler tidaklah sulit. Hanya perlu copy paste dan sedikit edit. Berikut ini script lengkapnya.

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">

<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler disini

</div>
</div>
</div>

Judul akan ditampilkan di sebelah tombol Open, bisa diganti sesuai selera pada teks berwarna hijau. Teks yang tertera pada tombol juga bisa diganti sesuai selera dengan mengganti tulisan berwarna kuning pada script di atas, misalnya Open jadi Buka dan Close jadi Tutup. Sedangkan isinya bebas, bisa teks atau gambar. Dalam contoh di bawah ini aku akan men-spoiler gambar dengan url :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6MWPdlxKGllZxUE7mJedxV_jKMTyImX2SoN4GMtXZG4cnLsDldHFc94hAK1atOtGZdu_URSXitojYXSfKv032DsAq0JqBKrq_0XzU-6URt9OQLtTceHfb1x7F0OLT2oJmUm7QycZKdiX/s320/12628614_889898607798300_6905809842818987808_o.jpg

Dan hasilnya akan terlihat seperti ini :

Contoh Spoiler:

Mudah bukan? Selamat mencoba. Semoga blog kamu nambah ringan dan nambah pengunjung.

Bagikan Artikel ini