Monday, March 28, 2011

Membuat Tombol Show/Hide

Tombol Show/Hide Terkadang Memiliki Kegunaan Multi-Fungsi. Karena Selain Terkesan Kreatif Dan Keren, Tombol Show/Hide Juga Bisa Menyembunyikan Script Atau Text Yang Panjang Hanya Dalam Bentuk 1 Tombol Sehingga Menghemat Tempat, Dan Untuk Memunculkan Scriptnya Hanya Cukup Dengan 1x Klik Tanpa Harus Capek-Capek Menggerakkan Kursor Apa Bila Script/Text Tidak Diberikan Scroll. Bahkan Dengan Scroll Pun Masih memakan Tempat Lebih Banyak Di Banding Tombol Show/Hide.
Apa Bila Kalian ingin Membuat Tombol Show Hide Silahkan Ikuti Langkah Di Bawah Ini:
1) Login ke Blogger
2) Masuk Ke Posting > Entri baru
3) Ketiklah Sebuah Artikel

4) Ketika Ingin Mem-Paste Code Artikel, Silahkan Copy Code Di BawahIni(Paste Dalam Bentuk HTML)
<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" 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;Sembunyikan&#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;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>
<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" 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;Sembunyikan&#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;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>

5) Ubah Tulisan Masukkan text-nya disini. Gambar juga bisa. Dengan Text Yang Ingin Anda Sembunyikan
6) Save
7) Ini Contoh Demonya:

Rhenz Blog
Http://www.friendchipzz.blogspot.com


Happy Blogging

No comments:

Post a Comment