Spoiler di Blogspot

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:

Tentang Judul bla..bla.bla..

isi spoiler...(Artikel atau gambar)

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:

Kasih Like dan komennya dong mas booos..

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.

Suka dengan postingan ini.?

Follow @asdharsyaputra

Ditulis Oleh : asdharsyaputra di label

Artikel Spoiler di Blogspot ini ditulis oleh asdharsyaputra pada hari Jumat, 15 Juni 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Spoiler di Blogspot dapat Anda sampaikan melalui kotak komentar dibawah ini. Dan jangan lupa di like yea kawan. Terima Kasih...

Backlink Please !

URL

Code For Forum

HTML Code <a href='http://asdharsyaputra.blogspot.com/2012/06/spoiler-di-blogspot.html' target='_blank'>Spoiler di Blogspot</a>

Di Like Dulu Gan Sebelum Pergi..!!

Kritik Dan Saran Sobat Sangat Membantu Blog ini Dalam Menulis Artikel Berikutnya