Cara Membuat Tombol Spoiler (Show-Hide)

4net April 22, 2014 0

Tombol / Button Spoiler berguna menyembenyikan artikel atau widget atau pun gambar sehingga akan mempersingkat/menghemat area postingan pada Artikel Anda. dan kegunaan lainnya Tombol Spoiler meringankan loading link artikel yang dibuka. yang cara kerjanya jika Tombol Show  di Klik maka secara automatis Blog akan menampilkan semua postingan, widget, maupun Gambar yang diletakan di dalam Area pada Tombol Spoiler, lalu jika Anda klik tombol Hide  maka tampilan postingan, widget maupun Gambar akan menutup kembali. ada beberapa langkah bagaimana Cara Membuat Tombol Spoiler (Show-Hide) pada postingan maupun pada widget sidebar.

Kodenya adalah sebagai berikut :

<div><div style="margin-bottom: 2px;"><b><small>Klik Button / Tombol dibawah ini</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
"Masukan Gambar,  postingan, Artikel Sobat disini"
</div></div></div>

Contohnya sebagai berikut :

Klik Button / Tombol dibawah ini

Note :

• Merah : Ganti sesuka anda

• Biru : Ganti Sesuka anda

• Hijau : Masukan Gambar, postingan atau pun Artikel

Sekian tutorial blog kali ini tentang  Cara Membuat Tombol Spoiler (Show-Hide) semoga bermanfaat