Cara Membuat Tombol Spoiler di Blog

Tombol Spoiler alias Tombol Buka Tutup atau Show Hide Button berguna untuk menyembunyikan gambar, teks ataupun link agar menghemat ruang postingan. Tombol ini akan terbuka jika pengunjung mengklik pada tombol dan tertutup bila mengkliknya lagi.  Spoiler biasanya gampang ditemui di forum-forum umum, misalnya kaskus atau forum lainnya. Untuk membuat spoiler di Kaskus sendiri caranya adalah dengan mamasukkan script berikut pada form posting:

[spoiler=Judul spoiler]isi spoiler anda[/spoiler]

Lalu bagaimana cara membuat spoiler di blog? Caranya adalah dengan masukkan script berikut pada form postingan (di bagian Edit HTML):

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 0px; margin: 0px; padding: 6px;"><div style="display: none;"><div style="background: rgb(180, 123, 16) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Contoh teks Membuat Spoiler di Blogspot,  ganti tulisan berwarna MERAH ini dengan teks atau gambar maupun link anda </div></div></div></div>

Contoh hasil script spoiler dari diatas adalah:

Contoh teks Membuat Spoiler di Blogspot, ganti tulisan berwarna MERAH ini dengan teks atau gambar maupun link anda

Atau bisa juga dengan memasukkan script berikut:

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Contoh teks membuat spoiler di postingan blog ganti tulisan berwarna MERAH ini dengan teks atau gambar maupun link anda</div></div></div>

Contoh hasil script spoiler dari diatas adalah:

Contoh teks membuat spoiler di postingan blog ganti tulisan berwarna MERAH ini dengan teks atau gambar maupun link anda

Note: Ganti tulisan Berwarna Merah diatas dengan teks, link, gambar ataupun script yang ingin anda taruh di dalam spoiler.

Spoiler ini juga dimasukkan dengan script widget anda jika anda ingin menghemat area sidebar.