Cara membuat Spoiler di Blog

Kali ini Saya akan membahas tentang "Cara membuat Spoiler di Blog".apa itu Spoiler?.Spoiler adalah sebuah tombol yang bila diklik akan terbuka isinya.Spoiler biasa digunakan di sebuah forum dan sebagainya.Sebuah spoiler biasa diisi dengan sebuah gambar,tulisan,video atau semacamnya tujuannya agar tidak terlalu berat dan terlihat rapi.Masih belum tau apa itu spoiler?
ini contohnya

keren kan?

contoh diatas itu contoh yang backgroundnya transparan
kalau mau backgroundnya berwarna ini contohnya (misal background oranye)

backgroundnya oranye

penasaran kan gimana cara bikinnya?
oke langsung aja kita mulai tapi sebelum itu follow blog saya dulu ya
kalo udah langsung aja tanpa basa-basi kita mulai tipsnya:

tapi sebelum itu saya jelaskan dulu
spoiler ini bisa ditaruh di postingan ataupun "Html/Javascript" terserah anda ingin menaruhnya dimana kalau ingin ditaruh dipostingan taruh di bagian edit html seperti disamping.Kalau ingin ditaruh di sidebar (html/javascript) caranya seperti dibawah ini

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kodenya
7.Simpan

KODENYA SPOILER :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Lagi'; }">
</div>

<div style="background: #00ffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
isi spoiler
</div>
Keterangan:
 -kode yang berwarna hijau bisa anda ganti sesuai keinginan anda contoh :buka,show dan sebagainya
-kode yang berwarna kuning bisa anda ganti sesuai keinginan anda contoh :tutup,hidden dan sebagainya
 -kode yang berwarna merah bisa anda ganti sesuai keinginan anda contoh :buka lagi,show again dan sebagainya
 -kode yang berwarna biru muda (cyan) adalah kode background untuk spoiler yang berwarna biru muda anda bisa menggantinya sesuai keinginan anda (Jika anda ingin membuatnya transparan ganti kode tersebut dengan tulisan transparent)
- -kode yang berwarna biru adalah isi untuk spoiler

selamat mencoba

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com