Cara Buat Spoiler Di Blog

Beberapa hari ini saya penasaran tentang spoiler... itu tuh yang biasanya di pake di kaskus atau forum2 buat nyembunyikan gambar, Setelah puter sana sini akhirnya nemu tutor yang pas di sini. Nah kali ini tips & trik tentang spoiler... simak deh siapa tau anda2 tertarik... :D

Nih tutornya

Menyembunyikan konten tertentu dari sebuah halaman website terkadang diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Dalam software forum semacam vBulletin, hal ini disebut dengan Spoiler.

Berikut adalah contoh penggunaan spoiler.

Ini isi spoillernya

Bagaimana cara membuatnya? Hanya diperlukan sedikit kode javascript yang langsung diembed di kode html.

Silahkan di Copy kode di bawah ini

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></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;">Ini isi spoillernya</div></div></div>

Ganti tulisan yang berwarna merah dengan tulisan atau gambar yang akan anda sembunyikan

selamat mencoba . . . . .