Cara Membuat Tombol Spoiler Pada Postingan Blog

Tombol spoiler / buka tutup / auto hide dapat dipasang di dalam postingan blog, dimaksudkan untuk menyembunyikan atau mempersingkat postingan seperti memasangkode script yang terlalu panjang atau memasang gambar dengan size besar. Dengan memasang tombol spoilerdi dalam postingan akan membuat loading blog lebih ringan manakala pengunjung membuka artikel yang kebetulan memuat gambar dengan ukuran besar. Simak bagaimana cara membuat tombol buka tutup/spoilerdidalam postingan.

Cara Memasang Tombol Spoiler Pada Postingan Blog

Buatlah satu postingan di blog anda, lalu masukkan kode spoiler dibawah ini pada mode HTML (bukan Compose). Kalau sudah lalu kembali pada mode Compose lalu langsung publikasikan.

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> : <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">

</div>

<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;">

Letakkan kode script atau gambar atau apa saja disini

</div>

</div>

</div>

</div>

Untuk contohnya, anda bisa klik tombol spoiler / auto hide dibawah ini.

Spoiler :

Silahkan dicoba dan copy kode script spoiler diatas manakala sewaktu-waktu dapat anda pakai untuk membuattombol spoiler didalam postingan blog, semoga bermanfaat.