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: