Cara Membuat Spoiler

Sudah banyak sahabat bloger yang posting  Cara Membuat Spoiler, Tapi tidak ada salahnya kalo Nirwana  membahas sedikit gimana Cara Membuat Spoiler link, Spoiler teks, Spoiler gambar, Spoiler  Video, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode html dan javascript. ( Baca Juga : Membuat objek bermata lembut di CorelDRAW )

Ok kita Langsung aja ke poko utama Cara Membuat Spoiler :

• Cara membuat Spoiler tanpa warna background.

Kodenya :

<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 = 'BUKA'; }" 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;">pengertian Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog  dll dengan menggunakan kode html. Tujuannya untuk menghemat ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya  tidak berat
.</p>
</div><div id="hide"></div></div></div>

pengertian Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog dll dengan menggunakan kode html. Tujuannya untuk menghemat ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat
.

• Cara membuat Spoiler dengan border dan warna background.

Kodenya  :

<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 = 'BUKA'; }" 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;">pengertian Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog  dll dengan menggunakan kode html. Tujuannya untuk menghemat ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya  tidak berat
</p>
</div><div id="hide"></div></div></div>

pengertian Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog dll dengan menggunakan kode html. Tujuannya untuk menghemat ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat

Keterangan :
<div style=”color: #000000;= Ini untuk mengganti warna teks
background: #EBF3FB; = Ini untuk mengganti warna background
border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border

• Cara membuat Spoiler untuk menyembunyikan gambar.

Kodenya :

<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 = 'BUKA'; }" name="button" 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 class="aligncenter" src="http://2.bp.blogspot.com/-gjevxWbS_dY/TvspopO1t6I/AAAAAAAAAu4/gpDtn1di8pQ/s1600/Ultrabook+Notebook+Tipis+Harga+Murah+Terbaik.jpg" alt="Nirwana" width="300" height="280" />
</div><div id="hide"></div></div></div>

Silahkan ganti : http://2.bp.blogspot.com/-gjevxWbS_dY/TvspopO1t6I/AAAAAAAAAu4/gpDtn1di8pQ/s1600/Ultrabook+Notebook+Tipis+Harga+Murah+Terbaik.jpg dengan URL gambar yang ingin anda disembunyikan.

 Semoga Bermanfaat Cara Membuat Spoiler@ Nirwana Sitoeking

Home ›

Tutorial Blogspot