Membuat Menu Show-Hide

Menu show-hide yaitu suatu menu yang bisa berguna untuk menampilkan “SHOW” dan menyembunyikan “HIDDEN” sebuah gadget/widget yang dapat membuat ruang blog kita tidak banyak memakan tempat dan menjadikan blog terlihat rapih, gadget/widget akan tampil “SHOW” jika di klik sembunyi “HIDDEN” ketika diklik kembali.

Cara adalah :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" kemudian pilih "Add a Gadget --> HTML/Javascript"
3. Copy Paste Script berikut ini



<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " 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 class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
LETAKKAN KODE SCRIPT KITA DISINI
</div></div></div></div></div>


Sebagai contoh : saya akan memasukkan kode script "tukaran banner".


4. Simpan dan jika berhasil maka hasilnya seperti dibawah ini

<br /><a href="http://diaracommunity.blogspot.com/" target="_blank"><br /><img src="http://i604.photobucket.com/albums/tt121/anakogie/th_banner.gif" border="0" alt="DiaraCommunity" /></a><br /><br />

Catatan :
Tulisan yang berwarna kuning silahkan ganti sesuai dengan keinginan kita.
Yang berwarna biru adalah tempat meletakkan kode script widget Anda.

Share |