Cara membuat Spoiler pada postingan blog

Cara membuat spoiler di postingan blog - Mungkin para blogger yang sering main di forum-forum sudah sering melihat spoiler. Nah, bagaimana cara membuatnya? kali ini tutorial blog yang akan saya share bagaimana memasang spoiler seperti yang ada di forum-forum pada postingan blog. Spoiler berfungsi untuk menyembunyikan sesuatu (teks/gambar/video) yang apabila tombolnya diklik maka teks/gambar yang di sembunyikan akan terlihat. Umumnya para blogger memasang spoiler dengan tujuan untuk menghemat tempat postingan.

Berikut contoh spoiler :

Spoiler teks :

Sisipkan teks sobat di sini !!

Spoiler gambar :

Berikut kode script untuk pasang Spoiler teks :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler Teks </b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Sisipkan Teks Sobat disini !!

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

Keterangan :

Ganti teks warna merah dengan teks yang sobat inginkan.
Untuk teks warna biru sobat bisa ganti sesuka hati.
Jika sobat ingin memasukkan kode HTML pastikan kadenya sudah di parse dulu.

Berikut kode script untuk pasang Spoiler gambar :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler Gambar </b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<img alt="Post spoiler" border="0" src="http://1.bp.blogspot.com/-90VYgoKkfrE/UA6SPROnyjI/AAAAAAAAALI/d84Q6FOeOw4/s320/Ahmad+Rizal%2527s+Blog.gif" /></div>
</div>
</div>

Keterangan :

Ganti teks warna merah dengan url gambar sobat.
Untuk teks warna biru sobat bisa ganti sesuka hati.

Cara memasangnya:
Copy kode yang tersebut saat dipostingan anda, pastikan anda mempastenya di mode HTML.

Sekian tutorial dari Ahmad Rizal's Blog
Semoga bermanfaat..