Cara Membuat Spoiler Buka Tutup Pada Postingan Blog

Melihat judul diatas pasti diantara kalian banyak yang mengetahui apa arti dari kata tersebut, terlebih bagi kalian yang sering mengunjungi sebuah situs forum ataupun situs yang membahas suatu diskusi dengan topik tertentu. Spoiler merupakan sebuah cara yang sering digunakan oleh para anggota sebuah forum dalam menampilkan/menyisipkan suatu objek tertentu di dalam postingan/tulisan yang mereka buat. Cara seperti ini dapat dikatakan trik yang sederhana dan awam bagi para anggota forum dalam me-minimize dan menunjukkan sesuatu yang ingin mereka sampaikan di dalam sebuah tulisan.

Spoiler memiliki peran dalam menyembunyikan/menampilkan suatu objek dengan cara mengklik suatu tombol yang ada di atasnya sehingga para pembaca dapat mengetahui apa yang ada di dalam form tersembunyi pada tulisan tersebut. Selain itu para pembaca pun dapat secara leluasa dalam membuka/menutup spoiler tersebut. Seperti yang sering kalian temui, para anggota forum lebih menyukai menyisipkan objek dalam bentuk gambar karena objek tersebut lebih memiliki daya tarik di dalam sebuah penulisan.

Pada kesempatan kali ini saya akan sedikit berbagi informasi dan pengetahuan bahwa cara ini (spoiler) sebenarnya tidak hanya dapat dibuat pada sebuah situs forum saja, melainkan kalian juga dapat menerapkannya pada sebuah tulisan yang kalian publikasikan di dalam suatu blog. Untuk lebih mengetahui bagaimana cara membuatnya, perhatikan dan ikuti langkah-langkah berikut ini:

 Langkah-langkah penulisan pada postingan:

1. Masuk ke akun blog kalian (Dashboard)
2. Setelah itu pilih bagian Pos » Buat Entri Baru (*Ingat, dalam hal ini proses penulisan harus dalam keadaan format HTML)
3. Kemudian copy kode di bawah ini dan sisipkan tepat di dalam postingan kalian:
   
   <div style="border: 1px solid #000000; height: 150px; overflow: auto; padding: 10px; width: 500px;"> <div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: center;"> <input 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'; }" style="font-size: 12px; margin-top: 5px; width: 100px;" type="button" value="Buka" /> </div> <div style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Hapus tulisan ini dengan tulisan yang kalian inginkan </div> </div> </div> </div> <br>
4. Langkah selanjutnya adalah publikasikan tulisan kalian dan lihatlah hasilnya
5. Berikut ini adalah hasilnya:
   Hapus tulisan ini dengan tulisan yang kalian inginkan - Dream Art Volution