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 . 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 Oya jangan lupa diShare ke JejaringSosial ya
<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 Oya jangan lupa diShare ke JejaringSosial ya
This post have 0 komentar
EmoticonEmoticon