Cara membuat Tombol Spoiler (Show-Hide) di Postingan dan Sideba

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.

Tolong dibaca nih gan !

Kamu sedang membaca artikel tentang Cara membuat Tombol Spoiler (Show-Hide) di Postingan dan Sideba dan kamu bisa menemukan artikel Cara membuat Tombol Spoiler (Show-Hide) di Postingan dan Sideba ini dengan url http://zackybee7.blogspot.com/2012/04/cara-membuat-tombol-spoiler-show-hide.html, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara membuat Tombol Spoiler (Show-Hide) di Postingan dan Sideba ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link Cara membuat Tombol Spoiler (Show-Hide) di Postingan dan Sideba sebagai sumbernya.

Artikel terkait :