Cara membuat Spoiler (Show/Hide) di Blog

12/14/2014
Yap..! udah lama nih engga ngepost tentang tip & trik tentang Blog, tapi tadi saya baru ketemu ide habis googlingan nyari cara membuat spoiler di Blog. Spoiler itu apa min? Spoiler (Show/Hide) bisa dibilang bingkai sebuah tulisan, widget HTML/Javascript, gambar, dan lainnya dengan cara buka tutup. Hal ini digunakan untuk memper-irit tempat pada template blog atau bisa juga lainnya terserah sobat. Engga usah banyak cincong, yok langsung aja Sob! kita ke Step membuatnya :D.


1. Copy kode berikut:

<div><div style="margin-bottom: 2px;"><b><small>Judul disini</small></b>

<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

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

Masukkan Tulisan, widget HTML/Javascript atau gambar sobat disini

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

Keterangan:
Pada Kode berwarna Hijau : Isi judul sesuka sobat
Pada Kode berwarna Merah : Masukkan Tulisan, widget HTML/Javascript atau gambar sobat


2. Paste kode tersebut pada:
  • Ingin dijadikan widget: Blog sobat> Tata Letak> Tambahkan Widget> HTML/JavaScript>Paste Kode tersebut> Simpan.
  • Ingin ditambahkan pada artikel: Blog sobat> Entri baru> pada kertas entri tersebut sobat pilih HTML (terletak di pinggir kiri tombol Undo pada Tool bar) > Paste kode tersebut> Kembali lagi ke tombol Compose (sebelah kiri Compose)
3. Sebagai Contohnya:

Saya berjanji, akan mengklik "Like/Suka" sesudah mengklik:  (Hayo luh udah janji :v)

Share this:

Related Posts

Previous
Next Post »

Aturan Berkomentar:
[+] Tidak Spam
[+] Tidak membuat konflik (SARA & Hinaan)
[+] Tidak menerima Link aktif (Atas Seizin Admin)
[+] Tutur kata sopan dan baik
[+] Emoticon list: EmoticonEmoticon