Membuat Efek spoiler

Kini saatnya saya belajar tentang efek spoiler karena fitur ini membuat saya penasaran, latar belakangnya nya sih ini menampilah banyak gambar,tapi ingin saya sembunyikan gambar tersebut untuk menghemat space. Nah Tutorial tentang Spoiler pernah saya baca di blognya Kang Ripi...!!

Makasih ya kang Ripiyuku Blogmu sering aku kunjungi buat menambah Ilmu..., hampir semua tutorial aku dapatkan di Blognya akang...!!

Sekarang aku lagi nyoba-nyoba efek Spoiler dan ternyata berhasil, tapi ini baru percobaan, ntar deh aku aplikasikan bwt menampilkan Foto-foto kemarin habis liburan sama Saat sidang KP.

Aku menampilkan tutorialnya, ...ya sedikit berbagilah barangkali saja bermanfaat buat blogwalking yang pada lagi belajar juga alian newbie!!!

Menyembunyikan konten tertentu dari sebuah halaman website terkadang diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Dalam software forum semacam vBulletin, hal ini disebut dengan Spoiler.

Berikut adalah contoh penggunaan spoiler.

Bagaimana cara membuatnya? Hanya diperlukan sedikit kode javascript yang langsung diembed di kode html.

Silahkan di Copy kode di bawah ini


<div>
<input style="margin:0px;padding:0px;" 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 = 'Tampilkan'; }" type="button" value="Tampilkan" /></div>
<div style="border: 1px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;">
<div style="display: none;">
Ini adalah konten yang disembunyikan, klik tombol Sembunyikan/Tampilkan untuk membuka atau menutup konten ini.</div>
</div>

Ganti tulisan dibawah :
Ini adalah konten yang disembunyikan, klik tombol Sembunyikan/Tampilkan untuk membuka atau menutup konten ini.
dengan tulisan atau gambar yang akan anda sembunyikan

Nah tu dia Efek Spoiler percobaanku, tinggal aku aplikasikan,untuk foto-fotoku yang lain deh....
untuk kalia selamat mencoba ....!!!

Tutorial ini saya ambil dari Blognya Mas ripiyuku :http://ripiyuku.blogspot.com/2008/11/cara-membuat-spoiler.html