Saturday, May 14, 2011

Cara bikin tombol hide-show

Kali ini membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain Photobucket . Misalnya saja teman-teman punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah teman-teman bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya teman-teman. Selain itu tombol spoiler ini tidak hanya berguna untuk tulisan atau teks, akan tetapi juga berguna untuk gambar, serta objek-objek yang dapat ditampilkan di blognya teman-teman yang menggunakan jasa javaScript/ kode HTML. Nah kalau penasaran apa itu spoiler, bisa tuh langsung melihat contoh tampilan berikut ini:



NOTE: jangan sampai NAKSIR

Kembali kepokok pembicaraan...untuk membuat tobol tadi yang hanya kita perlukan adalah
code dibawah ini

<div>
<input 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 = 'Sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: auto;" type="button" value="Tampilkan" /></div>

<div class="alt2">


<div style="display: none;">

<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(0, 0, 0) none repeat scroll 0% 0%; color: white; padding: 10px; text-align: left;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

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

Nb:..... ok tombol ini bisa ditaruh di postingan atau sebagai widget biasa

baiklah menurut saya semuanya dah jelas jika ada pertanyaan silakan komentar....sampai jumpa ditutorial berikutnya Photobucket  Oya jangan lupa diShare ke JejaringSosial ya 

No comments:

Post a Comment