Sudah lama saya tidak membuat tutorial untuk blogging. Sekarang saya mendapat cara untuk membuat spoiler. Apa sih spoiler itu? Ituloh, tombol yang menyembunyikan konten berupa gambar, teks, video dan sebagainya. Spoiler sangat berguna untuk kita yang mempunyai koneksi lambat dengan menyembunyikan konten terlebih dahulu, sehingga tidak ada konten yang terlewat.
Langsung saja kita praktikkan. Cekidot!
Kopikan scipt dibawah ini untuk membuat spoiler
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler <em>[Judul yang miring]</em></b> : <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"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>
Penjelasan:
Untuk judul spoiler kita bisa mengubah sesuka kita, misalnya "Spoiler untuk". Lalu untuk [Judul yang miring] kita bisa menjelaskan isi dari spoiler tersebut. Dan untuk [ISI SPOILER] kita bisa mengisinya dengan gambar, video, dan sebagainya. Untuk mengisi gambar kita harus menggunakan script html seperti ini:
<img src="url gambar" />
Url gambar adalah tempat kita menyimpan gambar tersebut.
Contoh
Sepertinya tidak afdol memberikan tutorial tanpa contoh. Berikut dari contoh pembuatan spoiler
Itulah mungkin sedikit tutorial dari saya. Maaf kalo cara penyampaiannya kurang berkenan di hati anda. Maklum masih newbie.
0 comments:
Posting Komentar
Sisihkan sedikit waktu Anda, untuk berkomentar :D