Membuat Spoiler (hide-Shows button) Untuk Blogger

Assalamualaikum wr.wb

tadi saya blogging-blogging lalu saya menemukan artikel menarik yang smoga bermanfaaat bagi kita dalam belajar membuat spoiler. Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog. Banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini.Spoiler adalah cara untuk 

menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show.Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler Baik kita mulai saja Tips dan Trik Cara Buat Spoiler 1. Cara membuat Spoiler tanpa warna background. Kodenya adalah : 

<br /> <br /> <br /> <div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER TANPA WARNA BACKGROUND" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..<br /> <br /> banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..<br /> <br /> Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler<br /> <br /> <br /> .</p></div><div id="hide"></div></div></div>

Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..

banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler


.

2. Cara membuat Spoiler dengan border dan warna background.
Kodenya adalah :

<br /> <div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..<br /> <br /> banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..<br /> <br /> Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler<br /> <br /> <br /> </p></div><div id="hide"></div></div></div>

Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..

banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

Keterangan :

Ini untuk mengganti warna teks
background: #EBF3FB; = Ini untuk mengganti warna background
border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border


3. Cara membuat Spoiler untuk menyembunyikan gambar.

Kodenya adalah :
<div id="spoiler"><div> <input name="button" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="CONTOH SPOILER UNTUK GAMBAR" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <img alt="blogonol" class="aligncenter" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrksFZ8-CjE1nNe1MoZdSKNvPAp9mnrmbgCNN8gsjFL0KdV4V1dDJ7eLEWw7TgLQXpiKdMCLY1oa-anp8KtstvrNE4ch_yOldWF8UU_6NCb5Dzshkq2Z906PjWYIhzl1zPhb_TZNE4y0/s1600/YPS.bmp" width="300" /></div> <div id="hide"> </div> </div>

Keterangan :

http://images.cooltext.com/1938740.gif dengan URL gambar yang ingin disembunyikan. OK, untuk Spoiler yang lainnya seperti Video, daftar link dan lain-lain  baik di dalam postingan atau di sidebar tinggal disesuaikan, kodenya  hampir sama.bisa menempatkan button di tengah dengan menambahkan kode ini pada baris kedua.

(ini artikel pindahan dari artikel bulan februari karena dikarenakan kesalahan teknis)

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854