Cara Membuat Spoiler Show/Hide di Blog

Spoiler atau disebut juga show hidden sering digunakan para bloger untuk meminimalis menu pada blog begitu pula saya juga sering menggunakan spoler show hiden agar tidak terlalu banyak menu yang di tampilkan. Saya akan memberikan tips untuk sobat bloger tentang cara membuat spoiler show hidden pada blog. Gk usah panjang lebar, langsung aja cek caranya seperti apa.

Caranya :

Copy code dibawah ini, paste-kan pada posting blog. INGAT! harus dalam keadaan HTML, bukan dalam keadaan COMPOSE.

<div><div style="margin-bottom: 2px;"><i><b><small>Klik untuk melihat </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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;Hide&#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;Show&#39;; }" type="button" /></div> 

<div style="border:inset ; margin: 0px; padding: 6px;"><div style="display: none;"> 

TEXT ANDA LETAKAN DISINI 

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

Keterangan:

• Ganti kata yang berwarna Hijau dengan kata-kata sesuka Anda.
• Letakkan teks Anda yang ingin di HIDE pada teks yang berwarna Biru.
• Hapus code yang berwarna Merah untuk spoiler yang tanpa kotak.

Hasil Spoiler yang dengan kotak :

Klik untuk melihat

TEXT ANDA LETAKAN DISINI

Hasil Spoiler yang tanpa kotak :

Klik untuk melihat

TEXT ANDA LETAKAN DISINI

Nah, begitulah cara membuat spoiler show/hide pada blog. Sangat mudah kan..!!


Semoga Bermanfaat...