Cara Membuat Spoiler di Blogger

Salah satu kegunaan spoiler adalah untuk mempercepat loading sebuah halaman web / blog. Ini sangat berguna terutama untuk web / blog yang mempunyai banyak gambar di dalamnya, apalagi kalo ukuran gambarnya besar. Pengunjung akan males nungguin web / blog terbuka secara utuh jika loadingnya lama banget gara² terlalu banyak gambar. Tau sendiri lah koneksi internet di Indonesia banyak yang lambat. Nah dengan spoiler ini, gambar yang ada di sebuah halaman web / blog ga' langsung di akses kecuali pengunjung tersebut yang membukanya, tentunya dengan mengklik tombol Open / Buka / Lihat. Intinya, objek yang berada di dalam spoiler dianggap ga' ada. Ga' percaya? Ni buktinya, coba bandingkan 2 halaman blog di bawah ini, manakah yang lebih cepet dibuka.

1. Halaman blog tanpa spoiler
2. Halaman blog dengan spoiler

Gimana hasilnya, lebih cepet yang pake spoiler kan? Nah berhubung aku baru aja dapet ilmu bukin spoiler dari sekarang aku mo coba sharing cara bikin spoilernya. Simpen dulu kodenya baik².

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

Tentukan objek yang mau ditaruh di dalam spoiler. Kemudian ganti tulisan yang berwarna merah pada kode di atas. Isi bisa berupa kode html atau teks.

Tiap spoiler hendaknya dibikin judul sesuai dengan konten yang berada di dalam spoiler. Ini akan menguntungkan pengunjung yang mempunyai koneksi berkuota, dengan demikian pengunjung tersebut hanya akan membuka spoiler yang mereka inginkan dan dapat lebih berhemat dalam menggunakan kuota mereka. Keuntungan untuk pemilik web / blog adalah pengunjung tersebut akan balik lagi ke web / blog kamu karena blog kamu ga' bikin boros kuota mereka.

Untuk variasi laen, kamu bisa juga bisa mengedit tulisan pada tombol spoiler dengan mengganti tulisan berwarna biru. Seperti Open menjadi Buka dan Close menjadi Tutup.

Misal nya pada saat memasukkan gambar pada web / blog, biasanya kodenya seperti ini

<img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGlEKnsv7FOQzBKL9T3ZMiwpMnZYtwjLUp5r-DXusus8Rve0V_tH2ryRUY9k8zE-NSxGK8fy15FphUoyZ_LsYOKnKr8CrslUMyj6Gs8nv9uB3Qx6mm5wzMJCr-_7zuqN_iV0TduyuLLA/s320/doraemon-1-a.gif" width="320" />

Dan gambar akan ikut di-load ketika web / blog dibuka pertama kali dan akan tampak seperti pada gambar di bawah ini.

Nah, biar gambar tersebut berada di dalam spoiler, kode lengkapnya seperti di bawah ini.

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Gambar 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGlEKnsv7FOQzBKL9T3ZMiwpMnZYtwjLUp5r-DXusus8Rve0V_tH2ryRUY9k8zE-NSxGK8fy15FphUoyZ_LsYOKnKr8CrslUMyj6Gs8nv9uB3Qx6mm5wzMJCr-_7zuqN_iV0TduyuLLA/s320/doraemon-1-a.gif" width="320" />

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

Dan hasilnya akan seperti di bawah ini

Gambar Spoiler:

Gampang kan caranya. Semoga tulisanku yang ribet ini bisa dengan mudah dipahami. Selamat mencoba..