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.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  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 kuningkode 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 )

About Mahdi e

- Berbagi itu indah -

24 comments:

  1. wawww....
    baru jadi ya???
    terima kasih banyak yo~

    udah aku coba..

    tapi ada yang mau aku tanya lagi nih,
    kotak untuk tulisannya bisa di ubah dengan image gak?
    gambar apa gitu..
    biar menarik aja..
    jadi gak sekedar hitam polos atau warna polos lainnya...

    maaf merepotkan....

    thanx a lot~

    BalasHapus
  2. @ ap. untuk background bisa kamu ganti pada kode kotak scroll, cari kode "background: #000000 url(#) no-repeat scroll 0 0"
    Ganti url(#) dengan url(http://alamat image yang akan dipasang),
    untuk kode warna bisa kamu ganti dengan transparent = sesuai warna background blog atau kamu ganti dengan warna lain

    BalasHapus
  3. @ap. bila yang dipakai hanya kode widgets drop down, cari kode

    background-color:NONE

    ganti dengan kode
    background: transparent url(http://i864.photobucket.com/albums/ab206/kibagus/animation/b32.gif) no-repeat scroll 0 0; background-position: center;

    lihat hasilnya di sini http://kibagusnet.blogspot.com/

    ganti alamat url dengan punya kamu sendiri. atau kalau kamu suka pakai punyaku.. thanks..!

    BalasHapus
  4. buka yang itu maksud aku...
    tapi yang jadi judulnya...
    bisa diganti image gak?
    kayak punya aku yang 'facebook and plurk', kan aku pakai foto ~maksudnya gitu~

    BalasHapus
  5. he he he kirain yang itu... maaf ya...!
    BISA...!!! caranya sama, ganti kode script drop down yang paling atas

    background:#424242

    dengan kode

    background: transparent url(http://i864.photobucket.com/albums/ab206/kibagus/animation/b32.gif) no-repeat scroll 0 0

    tinggal ganti url image-nya

    BalasHapus
  6. tambahan info :
    tambahkan kode
    height: 50px ( atur angka sesuai kebutuhan )
    setelah kode width: 100% pada script drop down.

    ubah kode color:#ffffcc ( warna huruf menu )
    ubah kode font-size: 11px ( besar kecil huruf menu )

    Nah sekarang udah lengkap.
    untuk kode diposting ini dibuat sederhana agar loading tidak berat.
    makasih... met mencoba .SUKSES SLALU BUAT KAMU SEMUA YANG MAMPIR DISINI..!

    BalasHapus
  7. ternyata capek juga buatnya..
    sangking pengen halamannya gak full...

    tenkyu banyak~
    hehe

    ditunggu tips2 lainnya~
    good luck

    BalasHapus
  8. oke bang makasih tutorialnya, ane melihat di blog sampelnya kok kursor mousenya bisa begitu ya, kasih tau dong bos caranya bikin, thenks you and salam kenal dari ''

    BalasHapus
  9. @mamas. lihat posting "mengganti-tampilan-cursor-mouse-pada blogger" triknya ada disitu..!! thanks sukses buat kamu..!

    BalasHapus
  10. thx ya buat tutorialnya, numpang mampir aja sambil baca2...

    BalasHapus
  11. kunjungan perdana...
    blognya sudah saya follow, klo berkenan follow balik ya....

    BalasHapus
  12. Thankyu bt info-y langsung di coba....!! D tunggu kunjungan bliknya.

    BalasHapus
  13. @CHUGY-GOGOG ..
    makasih dah mampir...!!
    biar hub persahabatan kita bisa terus aku sarankan kamu untuk share profil blogger kamu, biar bisa diakses.
    coba kamu klik "CHUGY-GOGOG" diatas .. profil blogger kamu tdk muncul karena blm dishare..!! just private..!!
    makasih ..
    salam sukses slalu buat kamu ...!!

    BalasHapus
  14. Salam kenal ye.., makasih sharenya buat tombol widget buka tutup akan sy coba..moga brhasil.., n sukses selalu..

    BalasHapus
  15. makasih gan infonya sangat membantu saya.

    BalasHapus
  16. infonya sangat menarik sob, sy mau lgs coba deh buat blog saya, mudah2 masih bisa disisipin..

    BalasHapus
  17. Kebetulan baru rombak template, tar di coba triknya :)
    terim akasin infonya

    BalasHapus
  18. thanks banget ni gan,,, muter2 ane nyari script ginian,, buat blog2 ane,, :)

    BalasHapus
  19. Baguz gan.....
    Mohon kunjungan baliknya yaa ke blog sderhana saya + Follow....

    (zamrudhijau.blogspot.com)

    BalasHapus
  20. artikelnya sangat bagus dan sangat bermanfaat, makasih
    semoga sukses saja.. dan salam hangat buat admin blog dari ibbenk21

    BalasHapus
    Balasan
    1. makasih...!
      smoga bermanfaat...!

      Hapus

Note :

Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
Terima kasih komentarnya...!
Semoga bermanfaat...!