Cara Membuat Teks Box Dengan Spoiler Buka dan Tutup

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 memasang kode script yang terlalu panjang atau memasang gambar dengan size besar. Dengan memasang tombol spoiler di 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/spoiler didalam 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 :

Demikianlah Tentang cara Membuat Teks Box Dengan Spoiler Buka dan Tutup,, Semoga Bermanfaat!!