Pasang Spoiler Buka Tutup di Widget 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 tampilan widget 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!

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Pasang Spoiler Buka Tutup di Widget Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://azka-veiro.blogspot.com/2012/06/pasang-spoiler-buka-tutup-di-widget.html" target="_blank">Pasang Spoiler Buka Tutup di Widget Blog</a>

:: Get this widget ! ::