Spoiler Gaya KASKUS

Pada artikel sebelumnya saya telah membahas tentang cara membuat spoiler disini. Dan tentu saja disertakan dengan apa itu spoiler dan maksud serta manfaat menggunakannya. Biasanya beberapa temen blogger suka sekali memodifikasi apapun yang berhubungan dengan aksesoris blognya. Nah, sekarang mari kita bahas tentang cara membuat spoiler mirip dengan gaya kaskus. Sobat ingin langsung memasangnya di blog sobat? ini dia caranya:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin:5px; margin-top:3px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> untuk <i>gambar</i>: <input type="button" value="Show" style="width:auto;font-size:10px;margin:0px;padding:0px;" 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'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 3px; border: 1px inset;">
<div style="display: none;">
<img src="ALAMAT_GAMBAR_ANDA" width="none" height="none" alt="spoiler gambar">
</div>
</div>
</div>

Demo:

Spoiler untuk gambar:

KETERANGAN
sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.


Selamat Ngeblog!

Kunjungi blog saya yang lain disini