Cara Membuat Spoiler (Buka/Tutup) pada Postingan

Apa itu spoiler? Mungkin bagi teman-teman yang sering berselancar di komunitas atau forum semisal kaskus, sudah tidak asing lagi dengan istilah spoiler. Adapun bagi teman-teman yang belum atau tidak pernah ikut forum, istilah tersebut masih asing. Misalnya, penulis sendiri pada awalnya juga bingung apa itu spoiler? 

Pengertian Spoiler

Biar tidak penasaran, berikut adalah pengertian mudah daripada spoiler. Spoiler adalah posting konten baik teks, foto atau video yang tersembunyi dan bisa dilihat jika pembaca meng-klik sebuah tombol. Pembaca juga bisa menyembunyikan kembali konten tersebut dengan menekan ulang tombol tersebut. Sementara fungsi daripada spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca.

Wah, keren bukan. Biar lebih mudahnya lihat aja di bawah ini. Silahkan tekan tombol 'buka', maka akan muncul sesuatu. Dan, tekan lagi tombol 'tutup', maka akan tersembunyi sesuatu tersebut.

HELLO, AKU ADALAH SPOILER LOOO.... Jika ingin membuat spoiler seperti ini, lanjutin aja bacaan pada Ngonline06 di bawah ini. Jangan menyerah ya...

Itulah spoiler. Tampilan di atas itulah yang dinamakan spoiler. Keren bukan?

Keuntungan Spoiler

Sebagaimana dijelaskan di awal, keuntungan membuat spoiler adalah minimal 3 macam, yaitu:

1.  Menghemat space postingan.

Bisa dibayangkan sahabat bisa menyembunyikan tulisan yang panjang dan gambar yang beraneka ragam dalam spoiler di atas tanpa mengganggu postingan sahabat. Mengingat tulisan yang panjang tersebut akan muncul jika ditekan tombolnya.

2.  Mempercepat loading.

Ini adalah manfaat yang sangat besar. Sahabat bisa menumpuk dan mengumpulkan konten tanpa perlu membebani loading blog sahabat semua.

3.  Menghemat kuota pembaca.

Ya, jelas donk jika loadingnya cepat tentu kuota dari pembaca tak terkurangi kecuali hanya sedikit. Oleh karenanya, pemasangan spoiler sangat menguntungkan bagi pemilik blog dan juga pengunjungnya.

Cara Membuat Spoiler

Cara membuat spoiler seperti di atas pun tergolong sangat mudah sekali. Berikut adalah kodenya. INGAT, tuliskan kode ini pada html, bukan compose ya...

 <div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
MASUKAN DEKRIPSI ANDA DISINI
</div>
</div>
</div>

Silahkan dipraktikkan. Semoga suksesss..!!