Cara Membuat Tombol Auto Hide Menampilkan Text dan Gambar

Baca Juga

Contoh

Sepertinya sobat sudah pada kenal yang namanya form button ya, kali ini membuat link form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar), atau dengan istilah spoiler.

Contohnya seperti di bawah ini:

Judul Spoiler:

Letakkan teks atau kode script (gambar atau video), link di sini.

Caranya, sobat tinggal masukkan kode dibawah ini dalam postingan.

Kode :

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

Judul Spoiler :

<input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Buka'; }" type="button">

</div>

<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;"> Letakkan teks atau kode script (gambar atau video), link di sini</div>

</div>

</div>

Kode yang berwarna merah adalah dimana obyek akan ditampilkan atau disembunyikan,bisa sobat ganti berupa teks saja,sebuah gambar maupun video kesukaan dan kode script/HTML. dan juga bisa diganti sesuai kemauan sobat.

Untuk memasukkan Kode HTML/Script harus di parse terlebih dahulu. pilih HTML dalam buat postingan.

Kalau saya selalu menggunakannya dalam setiap postingan tentang Tutorial Blog Untuk Memasukan Kode Script & HTML. Selain itu bagi saya, postingan blog terlihat elegan, simple & keren. yah seperti saya lh. hehehe...[AbdulHamidInfo]

Pages: