Mau Mengunakan Spoiler di Blogspot

Kalau kemarin kita sempat belajar membuat Blockquote. Untuk kali ini ada yang Mau Mengunakan Spoiler di Blogspot ? Mungkin anda ingin menyembunyikan gambar/banner, teks ataupun video di blog dimasksudkan untuk menghemat lahan atau space di blog anda, kita bisa menggunakan Spoiler untuk mengatasi hal tersebut. Kalu saya sendiri menggunakan trik ini baru-baru ini saja...maklum, scripnt untuk Spoiler baru saya dapatkan.

Jadi, kalau kita suka memasang gambar/banner yang besar yang mungkin waktu loadnya lama, otomatis waktu loading blog kita pun akan menjadi lama, itu bisa sedikit kita atasi untuk mengurangi waktu load blog kita dengan menyimpan gambar/banner tersebut di dalam Spoiler ini.

Oke langsung saja, dibawah ini ada 3 cara untuk membuat Spoiler.

Cara 1.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang Judul bla..bla.bla.. </span></i><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...(Artikel atau gambar)

</div></div></div></div>

Example:


Cara 2.

<div style="margin: 20px; margin-top:5px"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" type="button" style="margin: 0px; padding: 5px; width: auto; font-size: 11px;" 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'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
GAMBAR ATAU TEKS SOBAT LETAKKAN DISINI
</div></div></div></div>

Example Gambar:


Example Teks:


Cara 3.

<div style="margin-bottom: 2px;">Judul Spoiler Kamu
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI SPOILER

</div></div></div>


Keterangan:
Tulisan yang berwarna biru bisa kita ganti sesuai keinginan dan kebutuhan kita.
Tulisan yang berwarna ungu, itu untuk isi Spoiler. Jika spoiler ingin berisi gambar, anda upload dulu gambarnya ke hosting gambar seperti photobucket, tinypic, imageshack dll, lalu ganti "isi spoiler" dengan kode HTML gambar yang sudah diupload. Jika spoiler ingin berisi video, ganti "isi spoiler" dengan embed kode video.

Contoh Spoiler

Gimana? udah di coba dan bisa belom? Kalu belom bisa jangan nangis dong..terus mencoba dan belajar..Ok.

oh iya,,mpe lupa...jangan lupa sumbangan kliknya dong...hehehehe...