Cara Membuat Widget buka tutup di blog

Guna membuat menu Buka tutup di blog sangatlah banyak.
Yang Terutama tujuanya adalah merapikan tulisan.
coba bedakan gabar dibawah.

Tombol Tutup

 Setelah dibuka

Jika kita perhatikan gambar diatas,
maka, jelas lebih simple pada gambar yang pertama kan?

nah... Bagaimana cara membuat demikian?

1. longin ke blog sobat
2. Buat postingan baru.
3. Pada HTML Letakkan kode berikut

<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="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;"><a href="http://www.indosurvei.com/henra" target="_blank"><img border="0" src="http://iklanblogger.com/banners/532-1-1383811634.png" height="250" width="300" /></a></div></div></div !akhir spoiler>

maka akan tampak seperti ini contoh diatas

NOTE: 
Ganti Tulisan berwarna merah dengan Kebutuhan anda
Begitu juga dengan warna Biru


Untuk widget yang panjang
<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="BUKA DISINI" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background:#424242; color:#ffffcc; border:1px dashes yellow;" 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;TUTUP DISINI&#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 DISINI&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashes white; color:Bisque;background-color:NONE; text-align: justify; padding:10px; ">

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: #000000 url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 250px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">

KODE HTML / NON HTML

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

Demikian juga jika ingin membuat Di template blog.
pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript

Kemudian lakukan Hal yang sama, seperti yang dijelaskan diatas.


Demikian yang saya Post, semoga artikel ini Bermanfaat.