Beranda Tutorial Membuat Spoiler di Blog

Membuat Spoiler di Blog

237
4

Membuat Spoiler di BLog. Apakah yang dimaksud dengan spoiler? Spoiler merupakan cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol “show“. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler.

Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Berikut script yang bisa digunakan untuk membuat spoiler tersebut.

=========================================================================================

<div><div style=”margin: 5px;”>
<div style=”margin-bottom: 2px;”><i><span style=”font-weight: bold;”>Spoiler</span></i><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;”>

Content/Isi

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

============================================================================================

Sehingga script HTML tersebut, akan memberikan hasil seperti dibawah ini.

Spoiler

Content/Isi

4 KOMENTAR

LEAVE A REPLY

Please enter your comment!
Please enter your name here