Cara Membuat Spoiler Blog

Spoiler adalah script (baris perintah kode) yang dapat menampilkan tombol yang ketika di klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan teks, gambar atau yang lainnya yang bersifatnya panjang yang opsional dapat dilihat atau tidak.

Fungsinya yaitu untuk menghemat bandwith atau mempercepat loading halaman blog karena tidak perlu meload teks atau gambar yang kita spoiler lagi. Cara buatnya adalah sebagai berikut :

Pilih menu Design > Page Elements > Tambah Gadget > Pilih HTML/Javascript lalu Vaste Kode berikut :

<div id="spoiler"><div><input style="margin: 10px; padding: 0px; height:40px; font-size: 30px; font-weight:bold;" value="OPEN" onclick="if (this.parentNode.parentNode.getElementsByTagName('div') ['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')
['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')
['hide'].style.display= 'none'; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display= ''; this.innerText = ''; this.value = 'OPEN'; }" type="button"/><div id="show" style="border: 5px; solid red; margin 5px; padding: 2px; display: none; width: 90%;">
Masukkan kode gambar,texs,ato kode lainnya</div><div id="hide"></div></div></div>

    

Atau Bisa Menggunakan :

<div><input type="button" value="Show" 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'; }">
</div><div style="background: #http://alamat gambar.com; margin: 10px auto;
border: 1px solid #000;padding: 5px;"><div style="display: none;">Masukkan kode gambar,texs,ato kode lainnya</div></div>

Lalu Pilih Save

Moga bermanfaat

Posted in: Tips Blog