Cara membuat Tombol Spoiler (Show-Hide)

Cara membuat Tombol Spoiler (Show-Hide)di Postingan dan Sidebar. Cara membuat tombol Spoiler (show-hide) pada postingan maupun pada widget sidebar sebenarnya sama saja. Intinya anda hanya tinggal menyisipkan postingan ataupun kode script widget anda sebelum kode penutup </div> saja. Letakkan
postingan atau code script anda di sela-selanya. Adapun kodenya adalah sebagai berikut :

<div><div style="margin-bottom: 2px;"><b><small>Klik Show untuk melihat</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;">

[LETAKKAN POSTINGAN-KODE HTML/SCRIPT ANDA DI SINI]

</div></div></div>

Sebagai gambaran bentuk dari Tombol/button Spoiler bentuknya adalah seperti ini :

Klik show untuk melihat

Fungsi Tombol/button Spoiler ini ini adalah praktis untuk memperpendek/menyembunyikan widget atau postingan maupun gambar yang terlalu panjang ke bawah, sehingga akan memperpendek area postingan maupun sidebar anda. Selain untuk memperpendek/menyembunyikan Tombol Spoiler juga akan meringankan beban loading pada website/blog anda pada saat pertama kali dibuka. Jika tombol Show (Lihat) di klik maka otomatis blog akan menampilkan semua widget, postingan maupun image yang anda sembunyikan, begitupaun jika anda klik tombol Hide (Sembunyi) maka akan menutup kembali.

Pada Kode diatas anda bisa melakukan kustom dengan mengganti kalimat yang berwarna   Biru   dan   Merah   sesuai keinginan anda. Sedangkan kalimat yang berwarna   hijau   silahhkan anda hapus kemudian gantilah dengan Isi postingan maupun kode script widget anda, jumlah widget maupun image silahkan disesuaikan kebutuhan tidak ada batasannya. Begitulah sedikit tips/ cara membuat Tombol Spoiler (Show-Hide)di sidebar atau postingan. Untuk melihat contoh postingan dengan tombol Spoiler (Shoe-Hide) silahkan menuju ke sini. Oke Sobat Blogger, semoga artikel ini bermanfaat. Salam.

Share :