Jenis dan Cara Pembuatan Spoiler Untuk Blogger 5

Mungkin anda para blogger sudah tidak asing dengan istilah Spoiler,Istilaha Spoiler ini umumnya akan sering kita dapati pada website forum seperti forum yang terkenal dan umum di Indonesia yaitu Kaskus, dimana para anggota forum tersebut menggunakan Spoiler ini untuk menyembunyikan atau hanya menjaga garis posting teks atau gambar yang terlalu banyak dan panjang.Dan pengertian dari Spoiler ini sendiri adalah : Spoiler merupakan sebuah script atau kode baris perintah yang dapat menampilkan dan menyembunyikan bagian halaman ketika tombol di klik.Teknik spoiler ini banyak di gunakan para blogger untuk menghemat bandwidth atau mempercepat waktu loading halaman blog tanpa reload teks atau gambar.


Dan adapun Jenis dan Cara Pembuatan Spoiler Untuk Blogger Tersebut adalah :

1. Copy dan Pastekan Kode pada Spoiler di bawah ini pada postingan blog anda Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

<div><div style="margin-bottom: 2px;"><b>Klik Untuk</b> : <input style="padding: 0px 5px;display: inline;background-color: #2c6da0;color: #fff;cursor: pointer;font-weight: bold;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;text-shadow: 1px 1px #666;border-style:outset;" value="Buka" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 2px;"><div style="display: none;background:#f1f1f1;">
"Masukan Gambar, widget/script, postingan Anda disini"
</div></div></div>

2. Copy dan Pastekan Kode Pada Spoiler dibawah ini Ke Postingan Blog anda.Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

<div style="border: 0px inset gray; padding: 1px;"><div style="text-align:left;" ><b>Klik Untuk</b> : <button style="padding: 0px 5px;display: inline;background-color: #58aa00;color: #fff;cursor: pointer;font-weight: bold;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;text-shadow: 1px 1px #666;border-style:outset;" type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Klik Aja" >Buka File</button></div><div id="spoiler" style="display: none;background:#f1f1f1;"> "Masukan IMAGE, JAVASCRIPT DLL di sini" </div></div>

3. Copy dan Pastekan Kode Pada Spoiler dibawah ini Ke Postingan Blog anda.Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

<div ><b>Klik Untuk</b> : <input style="padding: 0px 5px;display: inline;background-color:#e50000;color: #fff;cursor: pointer;font-weight: bold;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;text-shadow: 1px 1px #666;border-style:outset;" value="Buka" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Tutup';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Buka';}" type="button" /> <div style="border: 1px inset; margin-top: 5px; padding: 6px;display: none;background:#f1f1f1;padding:10px 5px;">
"Disini tempat anda meletakkan teks atau kode script gambar dan video anda" <br> </div></div>

Demikian ketiga jenis Spoiler yang dapat anda gunakan untuk postingan blog anda, sehingga dapat menghemat bandwidth atau mempercepat waktu loading halaman blog tanpa reload teks atau gambar.

Selesai dan semoga bermanfaat....