Mau Mengunakan Spoiler di Blogspot Mau Mengunakan Spoiler di Blogspot | Blog Online Ganden

Rabu, Februari 16, 2011

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:

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.


Contoh Spoiler



Gimana? udah di coba dan bisa belom? Kalu belom bisa jangan nangis dong..terus mencoba dan belajar..Ok.
http://www.cute-smiley.com
oh iya,,mpe lupa...jangan lupa sumbangan kliknya dong...hehehehe...

Title Post: Mau Mengunakan Spoiler di Blogspot
Rating: 100% based on 92189 ratings. 5 user reviews.
Author: ganden

Terima kasih sudah berkunjung di blog Ganden Online, Jika ada kritik dan saran silahkan tinggalkan komentar

1 komentar:

Dewi on 20 Februari 2011 14.16 mengatakan...

Akhirnya nemu disini tipsnya..
Thanks ya..

Loading....

Posting Komentar

Terima Kasih Kunjungan Anda.
Komentar Anda sangat Berarti Buat Saya. Jadi, silahkan anda berkomentar tentang artikel yang berkaitan postingan saya. "Jangan Nyepam atau numpang link untuk kepentingan sendiri tanpa seijin penghuni blog"

 

Blog Online Ganden Copyright © 2009 Modification Blog by Blogger Jepara

Mebel Jepara