Cara buat spoiler show/hidden dalam postingan blog

Adapun fungsi spoiller adalah untuk mengefektifkan browser dalam loading halaman, karena pada saat spoiler belum diklik(show/buka) maka browse belum membuka  isi dari spoiler tersebut.

Pada postingan kali ini saya akan berbagi tips cara untuk membuat spoiler buka tutup pada postingan blog, jika Anda tertarik untuk menerapkannya pada blog Anda, maka silahkan lanjutkan membaca postingan ini:

Untuk membuat Spoiler buka/tutup atau show/hidden, sangatlah mudah, kita hanya menuliskan kode berikut ini pada postingan, tapi Jangan lupa harus menuliskan kode ini pada mode post editor "HTML"  jangan pada mode "Compose" berikut kodenya:

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">Tulisan, Gambar Atau Video yang akan dimasukkan dalan Spoiler ( yang bisa ditampilkan atau disembunyikan ) </div></div></div !akhir spoiler>

Khusus untuk kode tersebut di atas  yang berwarna merah dapat anda sesuaikan dengan selera dan kebutuhan Anda. Disamping dalam postingan, kode tersebut dapat diaplikasikan ke halaman statis ( laman), Gadget di sidebar maupun di footer.

Demikian postingan mengenai Cara membuat spoiler buka/tutup, show/hidden dalam postingan blog, semoga bermanfaat.

Posted in: Blogger