Sabtu, 09 April 2011

Membuat spoiler di postingan blog

Tentunya bagi kawan-kawan blogger, sudah tidak asing lagi dengan istilah spoiler. yang mana fungsi dari spoiler ini yaitu untuk meringkas tampilan postingan artikel di halaman blog agar tampak lebih ringkas/sederhana dan tidak memakan tempat. berikut ini adalah contoh bentuk spoiler yang biasa digunakan:


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>

sedangkan cara untuk menggunakannya yaitu silahkah copy script yang terdapat dalam spoiler di atas, kemudian pada bagian "ISI SPOILER", masukkan apa yang ingin anda tampilkan di dalam postingan blog anda. misalnya berupa gambar sehingga tidak terlalu memakan tempat postingan blog anda. namun untuk gambar, usahakan lebarnya tidak melebihi 10cm. selamat mencoba...!




1 komentar: