Ketik di sini apa yang ingin dicari lalu Klik “Cari Di Sini”

Membuat Tombol Spoiller Show – Hide Photo/Teks


Cara membuat Tombol Show – Hide Teks/Photo di Halaman Posting pada Blog. Tombol ini disebut dengan nama “Tombol Spoiller” atau ada yang menyebut “Tombol Show – Hide”
Biasanya cara ini dipergunakan untuk tujuan menghemat halaman posting dan untuk meperingan loading blolog

Tampilannya seperti ini :






Cara membuatnya:
Terletak di Halaman Posting (entri)
1.    Sama dengan petujuk cara menulis posting pada blog
2.    Upload Gambar / Photo yang akan di Show-Hide
3.    Klik Edit HTML 
4.    Copy paste kode HTML Gambar Photo yang telah di upload
5.    Warna merah adalah kode HTML Gambar/Photo yang telah di upload
6.    Ganti warna merah dengan kode HTML Gambar/Photo kalian
7.    Warna Biru adalah kode HTML Warna Biground/latar (Lihat Kode Warna  HTML di Sini)
8.    Klik TERBITKAN ENTRI


Kode HTML -nya

<div style="margin: 5px 0px 0px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat'; }" style="font-size: 16px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Lihat" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;">
<div style="display: none;">

------------------ Masukkan data di sini -------------------

</div>
</div>
</div>

ARTIKEL TERKAIT:

Label :