Spoiler atau Show and Hide

Spoiler atau Show and Hide -  Cara sederhana Membuat Tombol Show Hide / Spoiler widget di Blog. Tak perlu yang bertele-tele dan ribet, cukup gunakan kode tombol Show Hide / Spoiler dibawah ini untuk membuat Postingan Blog sobat tidak terlalu menggelayut atau terlalu makan ukuran heigt post blog.Lihat demo penerapan Show Hide atau Spoiler yang sudah jadi di NKOTBSB Konser di Jakarta atau bila ingin menerapkan dalam gambar yang banyak silahkan lihat di Foto Topless Rihana.

Modifikasi Spoiler atau Show and Hide dalam Postingan Blog ini akan membuat kode Show Hide yang disebut Spoiler, isi keseluruhan yang ada di dalam kode tersebut akan disembunyikan oleh sebuah tombol yang karena ditekan, dan ini akan menampilkan atau menyembunyikan konten atau gambar yang kita sembunyikan. Nich.., kode tombol Show Hide / Spoiler -nya yang berhasil saya ambil dari shabat kita Shaka Inghet.

 
Penerapan dalam HTML :

<div style="margin: 5px;"><br /> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tarik Gan </span></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"/><br /> </div><br /> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br /> <div style="display: none;"> Wakakakakakaka Bakekkok </div></div></div>

Hasil pembacaan brouser :

Tarik Gan

Wakakakakakaka Bakekkok

Keterangan :
Wakakakakakaka Bakekkok = Ganti dengan konten atau gambar sobat yang disembunyikan.
Selamat menikmati hasilnya, semoga bermanfaat.
Happy Blogging.