PASANG WIDGET BUKA TUTUP

Pada postingan tentang video kekerasan anti-Ahmadiyah sebelumnya, saya pernah pakai widget ini untuk meng-kamuflase embed video dari YouTube, sekaligus sebagai peringatan akan tontonan tersebut. Pada kesempatan ini, saya akan share kode pembentuknya.

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!

Posted in: Buka tutup,Free Stuffs,Widget