Rabu, 15 April 2015

Cara membuat Spoiler: Menyembunyikan gambar biar gak loading lama)










1. Model spoiler pertama
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div>
Judul Spoiler:
Contoh teks yang disembunyikan akan tampil seperti ini



2. Model Spoiler kedua

<div id="spoiler" style="display:none">

konten yang disembunyikan

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button>
Hasilnya seperti terlihat di bawah ini

vivanews

Tidak ada komentar:

Posting Komentar

Quote

Rahmat Bagi Semesta.
"Memuliakan manusia, berarti memuliakan penciptanya. Merendahkan dan menistakan manusia berarti merendahkan dan meninstakan penciptanya". –Gus Dur–

Google search

Custom Search

TOP 20 Pengunjung bulan ini

Flag Counter