Cara Membuat "Spoiler Hidden Show"

Pada pertemuan kali ini, saya akan menshare kepada para pembaca sekalian tentang membuat menu spoiler, tau apa itu spoiler?
Apabila kalian pernah mengunjungi situs kaskusdotcoid maka kalian akan meliahat menu yg namanya spoiler atau beberan dalam bahasa Indonesianya. Yang gunanya sebagai minimalisir luas halaman, teks atupun konten yang didalam spoiler bisa di sembunyikan dan juga bisa dilihat kembali. Berikut demonya

JUDUL SPOILER:

Masukkan Isi Spoiler Di sini

Lungsung saja caranya, kalian copy semua kode dibawah!

<div style="padding: 10px; border:1px solid #ccc;background:#ffffff"> <div style="margin-bottom: 2px;"> <b>JUDUL SPOILER:</b> <input value="Buka" style="border:0px solid #000;margin:0px; width: 60px;color:#fff; font-size: 10px; height:20px; background:#323c47" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div style="margin: 10px; padding: 0px; border: 0px inset #fff;"> <div style='display:none'> Masukkan Isi Spoiler Di sini</div> </div> </div>

Nah tinggal paste pada postingan yang akan menggunakan spoiler ini di menu HTML angan Compose, kata "JUDUL SPOILER" dan "Masukkan Isi Spoiler Disini" bisa diganti sesuai keinginan temen-temen. Untuk kode #ffffff merupakan kode warna, anda bisa menggantinya sesuai selera.
Selesai..

Semoga postingan kali ini bermafaat buat para pembaca semua, jangan lupa komentarnya ya

Posted in: Tips dan Trik,Tutorial Blog