Pasang Spoiler Buka/Tutup di Blog

Terus terang, saya kurang tau sumber asli dari widget ini. Karena saya sendiri mendapatkannya dengan klik kanan pada salah satu blog sahabat. Di search engine juga ditemukan beberapa istilah misalnya, spoiler buka tutup, show hidden widget, kode buka tutup, widget buka tutup dan sebagainya. Widget ini bisa juga dipakai untuk tampilan buka tutup buku tamu atau seperti yang saya pakai pada post sebelumnya diatas. 

Inilah kode pembentuk widget buka tutup [spoiler]:

<div style="text-align: center;">
<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="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: #e6e6e6; border-radius: 2px; border: 2px solid #ccc; color: black; width: 100px;" type="button" value="Buka" /></div>
<div style="padding: 5px; text-align: justify;">
<div style="display: none;">
ISI DENGAN TULISAN/URL GAMBAR /EMBED VIDEO/KODE BUKU TAMU DLL YANG AKAN DISEMBUNYIKAN</div>
</div>

Atau bisa juga menggunakan kode yang ini. Pilih mana yang bisa dijalankan pada blog kamu.

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN</div></div></div !akhir spoiler>

Kamu bisa mempersonalisasi kode berwarna merah sesuai keinginan kamu. Selain itu, kamu juga bisa mengatur setiap value, seperti lebar, warna border, tulisan dan lain -lain untuk tampilanwidget itu sendiri. Silahkan copy paste kode tersebut dan taro di sidebar, halaman post atau ditempat lainnya sesuai dengan keinginan kamu.

Selamat berkreasi dan moga bermanfaat!