Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode html dan javascript. Tujuannya adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, 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.
Spoiler tanpa warna background.
Spoiler tanpa warna background.
Spoiler dengan border dan warna background.
Spoiler untuk menyembunyikan gambar.
Berikut kode untuk membuat spoiler - spoiler di atas.
Cara membuat Spoiler tanpa warna background.
Kodenya adalah :
<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;">Dalam pengertian selanjutnya Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kode html. Tujuannya adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, 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>
Cara membuat Spoiler dengan border dan warna background.
Kodenya adalah :
<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;">Dalam pengertian selanjutnya Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kode html. Tujuannya adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, 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>
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
Kode kode warna HTML bisa anda lihat di sini.
Cara membuat Spoiler untuk menyembunyikan gambar.
Kodenya adalah :
<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 UNTUK GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3BCpDLadgQpMn0qLTOZUl5opGXcJZnJSN72jqi4g_WGC-nAFRF61XmVqEtMuOJcG8cvA_auCuPaBjX3RkYt2SZIfYPcl3bfkDc26-tS9AcD_hXQt5WhooKBHphp9g9JKdFGMfEApAE4/s320/monyet.jpg" alt="monyet" width="300" height="280" />
</div><div id="hide"></div></div></div>
Silahkan ganti : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRzJBUzt_af7YuXt7JPKEkdz2HgTne1GeocgiYK1L0T9zBc5e-WzcvQasqgvo58q8pY0KudQX0oQ-vR_TCHsvIn3zTgy_xyRn3WPXgDL22lgYj1IWYTKYJTojlaHNDhH2RLmO7aeczHc/s1600/3.jpg dengan URL gambar yang ingin disembunyikan.
Untuk Spoiler yang lainnya seperti Video, daftar link dan lain - lain baik di dalam postingan atau di sidebar tinggal disesuaikan, kodenya hampir sama.
Anda bisa menempatkan button di tengah dengan menambahkan kode ini <div align=”center”> pada baris kedua.
0 komentar:
Posting Komentar