Membuat widgets drop down model buka tutup dengan klik mouse

Membuat blog dengan banyak widgets bisa membuat blog kita menjadi lebih hidup dan menarik, tapi dengan banyaknya widget yang harus ditampilkan kadang kadang membuat blog kita menjadi kelihatan penuh dan tentu saja kurang bagus untuk menarik pembaca/pengunjung.

Script untuk widgets drop down model buka tutup dengan klik mouse merupakan salah satu cara agar blog kita tetap bisa menampilkan widget yang kita inginkan tapi dengan tampilan yang lebih sederhana dan kelihatan profesional. ( atau cara lain dengan mengatur widgets yang tampil dihalaman utama dan sub halaman )

Bagi yang ingin menggunakan cara ini silahkan mengikuti langkah berikut.

Langkah pertama

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<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; ">

KODE HTML / NON HTML

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

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran dan warna.

• warna merah, Teks yang tampil sebelum di buka ( silakan diganti sesuai keperluan )
• warna Orange, Teks yang tampil sesudah di buka ( silakan diganti sesuai keperluan )
• warna kuning,  kode warna backgroud widgets. ( dapatkan kode warna disini )
• warna hijau,  kode sript HTML / Non HTML yang ingin ditampilkan
• untuk lebar sudah diatur width: 100% --> menyesuaikan dengan lebar kolom secara otomatis. 

_______________________________________
Note :
untuk widget yang panjang biar tidak memakan tempat bisa ditambah.kombinasi dengan kode sript untuk kotak dengan scroll

<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>

Penambahan sript kotak scroll ini akan memunculkan tampilan scroll sehingga tidak banyak memakan tempat bagi yang ingin memasang widget yang cukup panjang.

• warna merah = script kotak scroll
• warna orange = script widget drop down buka tutup
• warna hijau = tinggi kotak scroll yang dibutuhkan, ganti angka 250 sesuai keperluan.
• untuk lebar sudah diatur width: auto --> menyesuaikan dengan lebar kolom secara otomatis. 
• text-align: left ---> posisi huruf/image ( left - center - right ) ganti sesuai keperluan  

Hasilnya bisa dilihat pada sample blog

Semoga bermanfaat...!!

Selamat mencoba..!
( biasakan untuk melakukan pra tinjau pada saat melakukan perubahan pada Script HTML sehingga bila terjadi kesalahan tidak merusak kode script yang telah ada )