Cara Membuat Spoiler Pada Blog

Kali ini saya akan menerangkan cara membuat sebuah spoiler, tahu nggak?
Spoiler itu tombol yang menyembunyikan sebuah konten, nah pada saat tombol itu di klik, konten itu akan muncul... nah langsung saja saya jelaskan caranya....
pertama, tuliskan basa basi(hehe) bercanda !!!

tempelkan kode di bawah ini...
<div id="spoiler" style="display:none">
Konten yang disembunyikan
</div>
<button title="Klik di sini" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka / Tutup</button>
nah, tinggal modifikasi saja,,,,
Ganti Konten yang disembunyikan dengan kode konten anda
Ganti Klik di sini dengan judul tombol anda
Ganti Buka / Tutup dengan tulisan yang diinginkan muncul pada tombol spoiler

nih contohnya...
 


Spoiler versi dua (update)
nih source codenya...
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2


</div>
</div>
</div>
 
Judul Spoiler:

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2

Tidak ada komentar:

Poskan Komentar

Tolong Berkomentar Dengan Baik dan Sopan