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 :
Note :
- Merah : Ganti sesuka anda
- Hijau : Masukan Gambar, postingan atau pun Artikel
Sekian tutorial blog kali ini tentang
Cara Membuat Tombol Spoiler (Show-Hide) semoga bermanfaat
