Cara Membuat Tombol Spoiler di Blog

Sobat , kali ini saya akan berbagi tutorial tentang Cara Membuat Tombol Spoiler di Blog tanpa CSS. Yang mana tombol ini bisa bermanfaat dan dapat digunakan untuk menyembunyikan sebuah artikel yang berisi tulisan, gambar, script atau yang lainnya. Dan akan terlihat dan terbuka setelah Sobat menekan pada Tombol Buka Tutup tersebut.

Contoh penerapan :

Bagaimana tertarikah Sobat untuk mencobanya?


Ok caranya cukup mudah, simak tutorial saya berikut ini :

1. Pilih tempat yang akan Sobat pasang tombol spoiler, entah dipostingan atau widget dll

2. Kopikan kode dibawah ini

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input value="Buka" style="margin-top: 5px; width: 100px; 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">


TAMBAHKAN DENGAN TULISAN, GAMBAR ATAU SCRIPT SOBAT DISINI


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

3. Jika sudah maka, lihat hasilnya. apabila berhasil maka tombol buka tutup akan terbuka.


Untuk mempercantik tampilan tombolnya, Sobat juga bisa menambahkan kode CSS dengan Class yang sama.

Demikian tutorial dari saya, semoga bermanfaat bagi kita semua !