cara menyembunyikan widget dengan spoiler

hai sobat via semua

hari ini aku akan share kepada kalian semua cara membuat spoiler.

spoiler adalah sebuah tombol yang berfungsi untuk menyembunyikan postingan, gambar, video atau pun widget-widget. 
Tapi saat ini aku akan membagikan cara membuat spoiler untuk menyembuyikan widget saja.

prinsip dari spoiler ini adalah show hide/ buka tutup, dimana jika tombol spoiler dalam keadaan tertutup ditekan maka elemen yang disembunyikan akan keluar sebaliknya jika tombol spoiler yang dalam keadaan terbuka ditekan maka elemen yang ada di spoiler akan tersembunyi.

tujuan dari spoiler ini adalah untuk menghemat space atau tempat

langsung saja, saya uraikan langkah-langkahnya sebagai berikut :

1. klik desain-tata letak
2. add gadget

3. pilih Html java script

4. masukkan script dibawah ini :

<center><div><div style="margin-bottom: 2px;"><i><b><small></small></b></i><input value="Pendukung" style="margin: 0px; padding: 0px; width: 120px; font-size: 12px;font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;BUKA&#39;; }" type="button" /></div>

<div style="border: 0px inset ; margin: 0px; padding: 0px;"><div style="display: none;">

Isi kode Gadget

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

pada tulisan warna merah itu adalah lebar spoilernya, dan tulisan yang berwarna biru adalah nama judul dari spoiler kamu.


sekian postingan saya kali ini
semoga bermanfaat :)