> Mripat Zone: Cara Buat Spoiler di Blog

Senin, 09 Januari 2012

Cara Buat Spoiler di Blog

Kalian tentunya sering ketemu blog atau web, yang menggunakan semacam penyembunyi konten seperti gambar, video, dll kan ? nah penyembunyi itu disebut spoiler.
Mengapa harus (sebenarnya ga harus sih) memakai spoiler ? Memakai spoiler membuat blog yang akan diakses tidak menjadi berat sehingga mengurangi waktu load halaman, dan si pengakses dapat dengan bebas
memilih melihat konten gambar atau tidak.
Kali ini admin akan share bagaimana membuat spoiler
Untuk membuat spoiler kita harus memasukkan beberapa HTML kode kedalam blog kita
Ini contoh HTML kode untuk membuat spoiler:


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Contoh 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;"> Isi Spoilernya </div></div></div></div>

dari kode diatas akan menghasilkan spoiler seperti dibawah ini
Contoh Spoiler
Isi Spoilernya

tulisan kuning adalah judul spoiler dan tulisan biru adalah isi spoiler
mudah kan ? :D

Silahkan Gunakan Facebook Comment untuk mempermudah berpendapat


Simpan URL ini

0 komentar: