Membuat Tombol Show Hide Gambar - Text Di Blog (Spoiler)

Tombol Show Hide pada Blog (Spoiler) ini berfungsi untuk menyembunyikan gambar atau text yang terlalu panjang sehingga bisa menghemat tempat posting. bisa juga digunakan untuk menyembunyikan gambar unik atau gambar yang mengejutkan pembaca.

Untuk cara-caranya silahkan ikuti tutorial berikut :

<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Tombol Spoiler" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampak'; }" type="button"></div><div class="spoiler"><div style="display: none;"><br /><br /> <div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;"><br /><br /><br /><br />Silahkan Tulis Teks Atau Masukkan Gambar Di Sini<br /><br /><br /><br /><br /><br /> </div></div></div></div>


Penjelasan Kode
Yang saya cetak tebal silahkan Anda isi dengan teks atau kode gambar yang ingin Anda sembunyikan serta nama tombol yang Anda inginkan.

Hasilnya :

Silahkan tulis text atau gambar disini

kalau di Kaskus untuk membuat spoiler caranya menggunakan kode berikut:

[spoiler=pesan]ISI PESAN / GAMBAR[/spoiler]

Selamat Mencoba, Semoga Bermanfaat Blogger.