cara membuat tombol show hide pada blog

Artikel kali ini saya akan membahas Cara Membuat Spoiler atau tombol Show - Hide di Blog. Spoiler adalah script atau baris perintah kode yang dipakai untuk menampilkan tombol yang ketika di klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog dll dengan menggunakan kode html atau yang lainnya yang sifatnya opsional dapat dilihat atau tidak. Fungsinya yaitu untuk menghemat ruang dalam suatu postingan atau sidebar. 

Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat

Cara Membuat Spoiler atau tombol Show - Hide di Blog :

1. Masuk ke akun blogger kita masing-masing.

2. Pada saat kita ingin membuat postingan blog,pilih edit HTML bukan compose.

3. Masukankode HTML berikut:

<br /><div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Masukkan Judul </span></i><br/><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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Isi spoiler </div></div></div></div>



4. Ganti teks (masukkan judul warna biru) yang berwarna merah dengan judul yang di inginkan.
5. Ganti ( Isi spoiler warna biru)dengan isi yang di inginkan. Misal ingin memasukkan gambar, ganti dengan URL gambarnya.