Cara Membuat Spoiler

Beberapa waktu lalu ada kawan blogger nanya cara bikin spoiler. Sebenarnya banyak blog yang membahas ini, namun tidak salahnya kalau ane posting untuk kawan-kawan. Spoiler bisa anda pasang di sidebar menjadi widget untuk menyembunyikan aksesori blog, bisa juga anda letakkan dalam postingan. Ok langsung saja kita bahas Cara Bikin Spoiler. Silahkan ambil script di bawah ini.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">masukkan judul anda di sini</span><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;">

Masukkan Tulisan atau Gambar Anda di sini

</div></div></div></div>

Kalau anda ingin memasukkan gambar seeperti yang terdapat di bawah tulisan, tambahkan kode seperti ini
<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/Saudi-Arabia-queen-.jpg" />
silahkan ganti tulisan merah dengan alamat gambar anda
Contohnya seperti di bawah ini

DI SINI

DI SINI ANE MENCARI
DI SINI ANE BELAJAR
DI SINI ANE MENGERTI
DI SINI ANE BERBAGI
DAN...
MUNGKIN DARI SINI ANE MATI

Ini kode spoiler untuk gambar

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">masukkan judul anda di sini</span><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;">
<img alt="blogonol" class="aligncenter" height="300" src="http://i445.photobucket.com/albums/qq171/etnikprogresif/efg-1.jpg" width="300" /></div>
</div></div></div></div>

Ganti kode merah dengan alamat gambar anda
Contohnya seperti di bawah ini

masukkan judul anda di sini

Selamat mencoba dan sukses selalu. Baca juga cara bikin spoiler 2

"keep spirits and do the best"