Membuat Show-Hide (spoiler)

Sedikit saya terang kan dulu, apa itu spoiler. spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar ukuran besar atau video tidak di load sebelum menekan tombol show. dengan kata lain spoiler membantu mengurangi waktu load konten blog dan memberikan pilihan kepada pembaca untuk membuka atau tidak isi spoiler. untuk lebih jelasnya lihat contoh di bawah ini

isi spoiler... (bisa image/script/link/ato widget)

Spoiler ini bisa di tampilkan pada sidebar maupun di postingan anda. nah untuk membuat nya ikuti saja langkah - langkah dibawah ini

* Log in dulu ke blogger
* kemudian klik layout pilih tata letak
* klik Elemen halaman dan pilih add HTML/Java Script
* Lalu copy paste kode di bawah ini

<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler... (bisa image/script/link/ato widget)

* Kemudian Simpan
* Untuk kode berwarna merah bisa diganti keinginan anda

Selamat Mencoba...........

Artikel yang Harus Di Baca