Membuat Spoiler Didalam Postingan Blog

Membuat Spoiler Pada Postingan Blog - Spoiler pada blog adalah sebuah format bingkai yang digunakan untuk membingkai atau menyembunyikan teks, gamabar, video maupun apa saja agar bisa di sembunyikan di blog. Nantinya pengunjung bisa melihat isi spoiler dengan cara meng-klik tombol buka tutup atau Show-Hide.

Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda meng-upload banyak gambar dalam postingan, maka anda sebaiknya anda memasukkan gambar-gambar tersebut kedalam spoiler agar loading blog tidak berat. Selain itu postingan anda akan nampak rapi dan praktis.

Contoh Spoiler :

Judul Spoiler:

Selain bisa dipasang di postingan spoiler ini juga bisa dipasan disidebar blog.

Kode Spoiler :

<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;">


Teks atau kode script (Gambar atau Video)


</div>


</div>


</div>

Cara Memasang Spoiler :

1. Upload gambar di entry baaru
2. Setelah gambar terupload, buka HTML di entry baru (bukan Compose) 
3. Kemudian letakkan kode spoiler di tempat yang anda inginkan, 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/AVvXsEh1hjiv9eTSXztMexJRTA4ueNznnXvT5tlSSA4u5JHINHGGxkC5ccBx4pkvw5at75xT5TXVXGFK-7d4MuvvYX8AkbLBaEHferaNQN-KoMfKwBUdx8Deaaig0SwJDh-PoVXIzLLwUnyfzds/s1600/spoiler+blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hjiv9eTSXztMexJRTA4ueNznnXvT5tlSSA4u5JHINHGGxkC5ccBx4pkvw5at75xT5TXVXGFK-7d4MuvvYX8AkbLBaEHferaNQN-KoMfKwBUdx8Deaaig0SwJDh-PoVXIzLLwUnyfzds/s1600/spoiler+blog.jpg" /></a></div>


</div>


</div>


</div>

 4. Kembali ke Compose dan klik Publikasikan. Selesai.

Keterangan :
Kode yang berwarna merah itu adalah kode gambar, anda juga bisa memasukan lebih dari satu gambar kedalam satu spoiler, atau bisa menambah script apa saja.

Untuk Pemasangan Disidebar :
Anda tinggal pastekan kode spoiler beserta script gambar atau video kedalam gadget HTML, lalu tempatkan disidebar. Namun anda haruss menyesuaikan ukuran lebar gambar atau video lebih dulu agar sesuai dengan lebar sidebar anda.

Sumber : www.juragancipir.com