Cara Membuat Spoiler di Blog

Tip-Trik Membuat Spoiler Di Blog / Postingan | Cara Mudah Membuat Spoiler Seperti di KASKUS.

Spoiler ?
Sudah tahukan ?

   Kalau kita singgah di Kaskus.us, maka disitu akan banyak kita jumpai term Spoiler. Para Kaskuser menggunakan Spoiler untuk menyembunyikan sebagian atau seluruh konten, baik itu berupa teks, gambar, animasi ataupun video.

   Lalu bagamana cara menerapkannya di blog ??
    Sedikit akan saiia uraikan fungsi dari spoiler ini.
    Bisa dikatakan bahwa fungsi dari spoiler yaitu menghemat tempat [space], mengurangi waktu load konten pada blog [karena konten yang berat seperti gambar dan video tidak diaktifkan sebelum menekan tombol show], memberikan pilihan pada pengunjung blog untuk membuka atau tidak isi spoiler.

   Berikut ini kode yang digunakan untuk membuat spoiler pada blog atau postingan:


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tulis aja sekenanya </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"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi tulisan spoiler...

</div></div></div></div>


Hasilnya seperti dibawah ini:

Tulis aja sekenanya

isi tulisan spoiler...

Alternatif spoiler
Kode :
<center><div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color: black;"><span style="color: #006600; font-weight: bold;"><blink>Tulis saja sekenanya</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="color: #006600; font-weight: bold;"><br /> <br /> Isi teks disini<br /> <br /> </span></div></div></center>

Hasil tempilan:

Isi teks disini

Silahkan ganti beberapa teks seperlunya.
Kalau sobat blogger sudah terbiasa mengotak-atik kode HTML, bisa modif sendiri.

Term: cara membuat spoiler di blog, cara membuat spoiler seperti dikaskus

cara bikin spoiler gambar

Copy Rights : Munzaro.Blogspot.Com

Postingan Lainnya