Kamis, 22 Desember 2011

Pasang Widget Buka Tutup

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.

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!
 
Sumber: (http://www.iskaruji.com & Berbagai Sumber)
 

0 komentar:

Poskan Komentar

 
Copyright © . RALEOPA_Q - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger