Cara membuat Spoiler Di blog

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Spoiler di blog Blog. Spoiler pada blog adalah sebuah format bingkai yang digunakan untuk membingkai atau menyembunyikan teks, gambar, video maupun apa saja agar bisa disembunyikan di blog. Nantinya pengunjung bisa melihat isi spoiler tersebut dengan cara meng-klik tombol buka tutup atau "Show-Hide".

Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda mengupload banyak gambar di postingan, maka anda sebaiknya memasukkan gambar-gambar tersebut ke dalam spoiler agar loadingnya blog menjadi ringan. Selain itu postingan anda akan tampak praktis dan keren.

berikut contoh spoiler yang bisa anda lihat dibawah ini:

Judul Spoiler:

Nah inilah contoh dari spoiler yang saya maksudkan tadi untuk dapat menggunakan spoiler ini anda bisa mengcopy css di bawah ini

Cara memasangnya;

1. Upload gambar di entry baru seperti biasanya.
2. Setelah gambar terupload, buka HTML di entry baru (bukan Compose)
3. Kemudian letakkan kode spoiler di tempat yang anda kehendaki, lalu pindahkan script gambar yang telah anda upload tadi ke tengah spoiler. Contohnya bisa anda lihat dibawah ini;
   

   <div style="margin: 5px 20px 20px;">
   <div class="smallfont" style="margin-bottom: 2px;">
   <b>Judul Spoiler</b>: <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: 0px; padding: 0px; width: 55px;" type="button" value="Buka" />
   </div>
   <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
   <div style="display: none;">
   <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcePtUm8kx6EtAqpviyF6vOXoypjkad2JgNsG5T4_E1mDYzfaes5XkOhizlPN7ukwU8HmpGOixJBSniItZK6VbaURsi_ZtAN6mB5_1NyEI_Gof8iXlHvpKHxKkhYhoVGSQZ-XbbM-rbbc/s220/20141117213629.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcePtUm8kx6EtAqpviyF6vOXoypjkad2JgNsG5T4_E1mDYzfaes5XkOhizlPN7ukwU8HmpGOixJBSniItZK6VbaURsi_ZtAN6mB5_1NyEI_Gof8iXlHvpKHxKkhYhoVGSQZ-XbbM-rbbc/s220/20141117213629.jpg" width="400" /></a></div>
   </div>
   </div>
   </div>

     4. Kembali ke Compose dan klik Publish. Selesai.