Cara Membuat Spoiler Blog

The Blogger's HandbookSpoiler 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>
Beginning Google Blogger  New Broderbund Printshop 23 Incredible Design Projects Made Easy Print & Share Your Projects  WordPress for Business Bloggers: Promote and grow your WordPress blog with advanced plug-ins, analytics, advertising, and SEO



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


0 comments: