Cara Membuat Tombol Show Hide atau Spoiler di Blogger
BlogRuangInformasi akan berbagi ke sobat yaitu bagaimana membuat tombol Hide/Spoiler dalam postingan. Sebelum sobat mencoba dalam postingan sobat, apa itu Spoiler?. Spoiler adalah salah satu cara untuk menyembunyikan sebagian isi dari postingan yang kita buat. Spoiler juga bermanfaat agar konten posting yang berat seperti gambar (dalam ukuran besar) dan video [embed dari Youtube] tidak dimuat secara langsung saat halaman dibuka sebelum menekan tombol “show”. Dengan adanya spoiler dapat membantu mengurangi waktu loading sebuah situs dan memberikan opsi kepada pembaca blog untuk membuka atau tidak isi spoiler tersebut.
Contoh tampilan Membuat HIDE/SHOW atau SPOILE
Berikut kode HTML yang bisa sobat gunakan dalam membuat spoiler di blog :
<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
MASUKAN POSTINGAN SOBAT DI SINI . . . .!!!
</div>
</div>
</div>
Ket.
- Tulisan warna hijau "JUDUL SPOILER" bisa diganti dengan judul yang sobat inginkan
- Tulisan warna merah "MASUKAN POSTINGAN SOBAT DISINI...!!!" masukan skript HTML sobat.
Ok..!!, Demikian postingan ini semoga bermanfaat..
Categories:
Tutorial Blogger
1 Comments
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:k:
:l:
:m:
:n:
