Pasang Spoiler di Postingan Blog

Nah, ada yang pernah denger spoiler ga? apa sih spoiler itu? kalo searching di google spoiler itu bermacam-macam artinya, menurut situs wikipedia spoiler dalam bidang penerbangan diartikan sebagai alat untuk mengurangi daya dorong pada penerbangan. Dibidang otomotif diartikan alat untuk mengubah arus udara pada kendaraan bermotor. Namun disini saya tidak membicaraan arti spoiler dari kedua bidang tersebut, melainkan mengartikan spoiler dalam hal sebuah postingan.

Dalam sebuah postingan , spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten sebuah tulisan/blog. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog. Jadi dengan memanfaatkan teknik ini dapat memberikan pilihan kepada pembaca blog untuk membuka atau tidak isi dari spoiler tersebut.

Bagaimana sih cara membuatnya??? nah, itu pertanyaan bagus. Disini saya akan membahas cara menggunakan spoiler. Caranya cukup mudah sahabat tinggal copas saja script berikut, dan letakkan di blog pada bagian posting.

Script

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</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 spoiler
</div></div></div></div>

Keterangan :

# Ganti kata yang berwarna merah sesuai kebutuhan.
# Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload seperti photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
# Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

Contoh spoiler dari gambar yang saya upload lewat photobucket

Photo

Silahkan sahabat praktikan sendiri...semoga postingan ini bermanfaat...amiin