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...

Admin - Zlems Creative

NOTE :
Bagi Anda yang akan download file, Anda akan diarahkan ke Adf.ly kemudian tunggu 5 detik dan klik tombol SKIP AD / LEWATI yang berada di sebelah kanan atas monitor Anda. Terima Kasih.

Get Free Email Updates Daily!

Follow us!

Baca Juga Ini :


3 comments:

  1. I like this article very much because it is technical and very much useful for me to gather more knowledge. Good to read...Pakistani matrimonial sites

    ReplyDelete
  2. All that we are is the consequence of what we have estimation. Wait… Has anyone exhorted dissertation for you. Keep the articles progressing !Pakistani matrimonial sites | Pakistan marriage | Pakistani Shadi

    ReplyDelete
  3. kalau show/hied untukm banner iklan kayak punyanya detik ada gak gan

    ReplyDelete

Kritik dan Sarannya di Tunggu...
Jangan Bekomentar Spam yah... ^_^