Cara Membuat Widget Tombol Show - Hidden di Blog

Posting saya kali ini adalah sebuah cara untuk membuat halaman blog yang terlalu penuh dengan widget menjadi lebih longgar. Beberapa widget mungkin dapat kita tampilkan dalam box tersembuyi dan hanya akan terlihat ketika seorang pengunjung menginginkannya saja. Contohnya seperti yang terlihat di side bar blog saya ini.

Ya ... sebuah button atau tombol bisa digunakan sebagai fungsi pembuka 

widget yang kita sembunyikan. Pemanfaatan show-hidden atau lebih dikenal dengan nama spoiler, selain membuat halaman blog menjadi tidak terlalu berjejal, diharapkan juga mampu memberi peluang blogger untuk memunculkan tampilan baru yang lebih indah.

Javascript akan menjadi pelaku utama fungsi show-hidden. Tidak rumit untuk menggunakannya. Semua javascript kita gunakan langsung di kolom dimana widget akan kita sembunyikan, tanpa perlu menyentuh halaman edit html. Dengan cara yang teramat praktis ini, diharapkan semua blogger, bahkan yang masih dalam tahap belajar pun dengan mudah mampu memanfaatkannya.

Ini  kodenya : 

===============================================================

<div><div style="margin: 5px;">

<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " 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 = 'Tampilkan'; }" type="button"/>

</div>

<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">

<div style="display: none;">

Letakkan disini kode html yang akan dibuat show - hidden

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

===============================================================

Langkah menggunakan Show-Hidden :

1. Login to Blog Anda.
2. Setelah masuk di halaman Dasboard, KLIK link Design/Rancangan.
3. KLIK Add Gadget/Tambah Gadget.
4. KLIK HTML/Javascript.
5. Pastekan seluruh Javascript Show-Hidden dan kode HTML Widget yang akan dipasang.
6. KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog.

Keterangan :

• Ganti Teks yang berwarna hijau dengan Kode HTML yang akan di pasang.
• Ganti Teks yang berwarna biru dengan kata-kata yang anda inginkan misal: Munculkan atau show
• Ganti Teks yang berwarna orange dengan kata yang anda inginkan, misal: Hide, atau hilangkan

Demikian informasi mengenai cara membuat tombol show/hidden di blog yang dapat di kreasikan dalam pembuatan halaman blog, sehingga blog bisa kelihatan lebih cantik dan menarik.

Selamat mencoba, semoga bermanfaat.