Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.
- Spoiler Forum misalnya KASKUS:
- Spoiler untuk blog/web:
[spoiler=judul spoiler]isi spoiler[/spoiler]
Ganti tulisan yang berwarna merah sesuai judul dan isi spoiler yang anda kehendaki.
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.
Berikut adalah contoh penggunaan spoiler.
Untuk membuatnya 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'; }" value="Tampilkan" type="button"></div>
<div style="border: 1px solid rgb(125, 125, 125); margin: 10px auto; padding: 5px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; 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 yang berwarna merah dengan tulisan atau gambar yang akan anda sembunyikan.
0 komentar:
Posting Komentar