Membuat Tombol Spoiler
Tombol spoiler adalah tombol yang di gunakan untuk menampilkan dan menyembunyikan suatu konten, dapat berupa text, gambar, video dan sebagainya. Spoiler di gunakan untuk membuat penampilan suatu web/ blog lebih ringkas dan ringan. Secara default, spoiler ini akan menyembunyikan obyek dan ketika tombol di click maka objek akan ditampilkan.
Berikut ini adalah contoh Tombol Spoiler yang dapat anda gunakan dan kodenya terdapat di dalam masing - masing contoh Tombol Spoiler tersebut:
Anda dapat juga menggunakan kode berikut ini untuk membuat Tombol Spoiler:
Selesai...
Berikut ini adalah contoh Tombol Spoiler yang dapat anda gunakan dan kodenya terdapat di dalam masing - masing contoh Tombol Spoiler tersebut:
Anda dapat juga menggunakan kode berikut ini untuk membuat Tombol Spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Silahkan letakan kode atau text anda di sini
</div>
</div>
</div>
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Silahkan letakan kode atau text anda di sini
</div>
</div>
</div>
Selesai...
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon