artikel kali ini saya akan membahas Cara Membuat Spoiler atau tombol Show - Hide di Blog. Spoiler adalah
script atau baris perintah kode yang dipakai untuk menampilkan tombol yang ketika di klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan suatu
link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau
sebagian isi dari postingan blog dll dengan menggunakan kode html atau yang
lainnya yang sifatnya opsional dapat dilihat atau tidak. Fungsinya yaitu 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 atau tombol Show - Hide di Blog :
1. Masuk ke akun blogger kita masing-masing.
2. Pada saat kita ingin membuat postingan blog,pilih edit HTML bukan compose.
3. Masukankode HTML berikut:
2. Pada saat kita ingin membuat postingan blog,pilih edit HTML bukan compose.
3. Masukankode HTML berikut:
<br
/><div><div style="margin: 5px;"> <div
class="smallfont" style="margin-bottom:
2px;"><i><span style="font-weight: bold;">Masukkan Judul </span></i><br/><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
</div></div></div></div>
5. Ganti Isi spoiler dengan isi yang di inginkan. Misal ingin memasukkan gambar, ganti dengan URL gambarnya.
Hasilnya :
CONTOH SPOILER
