Senin, 04 April 2011

Membuat Show/Hide Button

Posting lagi nyoookkk.. :D. Kali ini postingan ane tentang cara membuat Button Show/Hide, contohnya kaya gini  gan :

Klik Untuk melihat

Kalo menurut ane selain bisa merapikan tampilan blog, ini trik juga bisa buat di jadiin sitemap (yah,, tergantung kreasi masing-masing sih, xixixixi :D). ya udah, tanpa basa-basi lagi, langsung aja kita ke TKP, cekidooot

  • Login ke Blogger
  • Masuk ke menu Rancangan
  • Tambah widget HTML/Javascript
  • Habis itu, copas deh code berikut
<div>
<div style="margin-bottom: 2px;">
<i><b><font-face="comic san ms"><medium>Klik Untuk melihat
</medium></font></b></i><input value="Buka" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href=" ">Komputer</a></div>
</div>
</div>
Script yang warnanya merah bisa disesuaikan dengan selera masing-masing, contoh diatas, teks yang ane masukkin di code show/hide button berupa link, kalo mau di ganti teks biasa boleh atau gambar, bisa juga, sesuaikan ama selera ente-ente pada aja deh :D. Sekian dan selamat mencoba ya gan

Tidak ada komentar:

Posting Komentar