Cara membuat Tombol Spoiler (Show-Hide)

Diposting oleh Abdul Rahman | at 11.16

Cara membuat Tombol Spoiler (Show-Hide)di Postingan dan Sidebar. Cara membuat tombol Spoiler (show-hide) pada postingan maupun pada widget sidebar sebenarnya
sama saja.

Intinya anda hanya tinggal menyisipkan postingan ataupun kode script widget anda sebelum kode penutup </div>saja. Letakkan postingan atau code script anda di sela-selanya. Adapun kodenya adalah sebagai berikut :

<div><div style="margin-bottom: 2px;"><b><small>Klik Show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

[LETAKKAN POSTINGAN-KODE HTML/SCRIPT ANDA DI SINI]

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

Sebagai gambaran bentuk dari Tombol/button Spoiler bentuknya adalah seperti ini :

Klik show untuk melihat

Fungsi Tombol/button Spoiler ini ini adalah praktis untuk memperpendek/menyembunyikan widget atau postingan maupun gambar yang terlalu panjang ke bawah, sehingga akan memperpendek area postingan maupun sidebar anda. Selain untuk memperpendek/menyembunyikan Tombol Spoiler juga akan meringankan beban loading pada website/blog anda pada saat pertama kali dibuka. Jika tombol Show (Lihat) di klik maka otomatis blog akan menampilkan semua widget, postingan maupun image yang anda sembunyikan, begitupaun jika anda klik tombol Hide (Sembunyi) maka akan menutup kembali.

Pada Kode diatas anda bisa melakukan kustom dengan mengganti kata/kalimat yang berwarna kuning dan biru sesuai keinginan anda. Sedangkan kalimat yang berwarna merah silahhkan anda hapus kemudian gantilah dengan Isi postingan maupun kode script widget anda, jumlah widget maupun gambar silahkan disesuaikan kebutuhan tidak ada batasannya.

Semoga Bermanfaat,,,,:)