Cara Membuat Tombol Spoiler pada Postingan di Blog

     Apa itu spoiler? Saya yakin sobat sudah tahu semua mengenai arti dari spoiler ini yaitu sebuah script yang berfungsi sebagai tombol buka tutup (open close button). Spoiler telah banyak digunakan didalam web blog site karena fungsinya yang sangat membantu tampilan sebuah web blog site itu sendiri.

Kelebihan tombol spoiler pada sebuah blog

1. Minimalis
2. Menghemat ruang tampilan blog
3. sebagai tombol yaitu open close button

Untuk penggunaannya, kode HTML tersebut bisa digunakan sebagai Widget ataupun pada postingan. Jika sobat ingin menempatkan tombol spoiler ini cukup meng-Copas-nya ke Tab HTML buka di Compose

Berikut kode HTML nya,

<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Judul Spoiler" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>

Hasilnya seperti ini :

Ganti dengan objek atau teks yang anda inginkan

Atau yang ini,

<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Judul Spoiler" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>

Hasilnya :

Ganti dengan objek atau teks yang anda inginkan