Cara Membuat Tombol Spoiler Hide Show Di Post

                 Ini adalah suatu bentuk seperti membuat kotak wadah HTML. Jadi kita bisa memberi kotak pada Teks yang kita pilih, sekaligus bisa menambah gaya hide & show pada teks tersebut...

Tak suka panjang lebar saya...
Jadi mari langsung saja kulo beri tutoriale sajaya..
Perhatikan saya baik baik,, jangan kenama-nama,, eh kemana-mana maksudnya....

Ini adalah contoh spoilernya...Lihat dengan mata kepala anda!!

Conto/Tulodho Spoiler

I Love You FCSPS
In H.O.N.D.A
Together

Sudah lihat kan...
Pengen???

Ini dia aku kasi tau caranya
1. Ketikkan teks yang ingin di beri kolom di Entri Baru. 
2. Edit HTML pada postnya yang terletak disamping compose
3. Masukkan kode berikut diantara teks yang anda ingin beri kolom spoiler....

<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>

<div class="alt2">

<div style="display: none;">

<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">

Masukkan text-nya disini. Gambar juga bisa.

</div>

</div>

</div>

Kalau gak bisa coba juga yang ini!!!

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>

Atau juga bisa dengan yang ini

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>

Keterangan :

• Untuk Warna Biru Silakan ganti dengan Judul spoiler kesayangan Anda
• Untuk yang berwarna hijau Silakan ganti dengan gambar
• Untuk yang berwarna Merah Silakan ganti dengan isi dari spoiler yang ingin anda sanpaikan...

Mudah kan....
Nah mungkin cukup sekian yang bisa saya sampaikan...
Semoga bermanfaat bagi anda...
Wassalamualaikum...