Cara Membuat Tombol Spoiler (Show/Hide)

Spoiler atau tombol show/hide ini memiliki fungsi yang tidak jauh berbeda dengan text area atau pun fungsi scrol.cara kerja spoiler ini adalah anda bisa menaruh artikel atau gambar bahkan kode script yang nantinya hanya di tampilkan sebuah tombil yang apabila di klik akan menampilkan isi dari spoiler tersebut.Spoiler ini bisa anda letakkan di postingan maupun sidebar anda jadi kalau anda tidak mau postingan atau sidebar anda terlihat penuh saya sarankan anda untuk menggunakan spoiler ini.

Contoh Spoiler:

Letakkan kode script, HTML dan teks atau gambar anda disini

Letakkan kode Spoiler ini di tempat yang anda inginkan (Untuk meletakkan di postingan pilih Edit HTML) :

<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"><br /> </div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br /> <br /> Letakkan kode script, HTML dan teks anda disini<br /> <br /> <br /> <br /> <br><br /> </div></div></div>

Keterangan :
1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Thanks for reading: Cara Membuat Tombol Spoiler (Show/Hide)

Baca Juga: Cara Mendapatkan Gadget Gratis dari Gokano

Jika anda menyukai artikel Cara Membuat Tombol Spoiler (Show/Hide), silahkan di link balik dengan menyertakan link berikut di situs anda . Terima kasih.

<a href="https://dytofree.blogspot.com/2011/10/cara-membuat-tombol-spoiler-showhide.html">Cara Membuat Tombol Spoiler (Show/Hide)</a>

Baca Juga:

Posted in: Tips and Trik,Tips Blogger