Cara Membuat Spoiler di Blog

Cara Membuat Spoiler di Widget dan Postingan Blog - Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bailkah, untuk menghemat waktu dan kuota internet saya langsung saja kita praktek. :) Pastikan ketika anda menulis postingan, dalam mode HTML, copy kode dibawah ini :

 <div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Ini hasil contoh Spoiler diatas :

Contoh spoiler teks:

Isi Spoiler - semua-tutorialku.blogspot.com

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1n3f22KSqAgLwlIi4j96j7gjWMnmav4kEPULCHct86Y0jvSgfL3B_YIgb_trbUAAemN-wvPUJCRnQDzHGsisFz1F4ytbB1fqdytYgsOjBWFIz2b7IBkuYqcmk_2LpHJ0yk-hfKG4hoMwC/s1600/cara+membuat+spoiler+diblog+semua+tutorialku+blogspot.jpg" />
</div>

Maka kode spoiler di atas menjadi :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1n3f22KSqAgLwlIi4j96j7gjWMnmav4kEPULCHct86Y0jvSgfL3B_YIgb_trbUAAemN-wvPUJCRnQDzHGsisFz1F4ytbB1fqdytYgsOjBWFIz2b7IBkuYqcmk_2LpHJ0yk-hfKG4hoMwC/s1600/cara+membuat+spoiler+diblog+semua+tutorialku+blogspot.jpg" />
</div>
</div></div></div> 

Dan ini hasil Spoilernya :

Contoh spoiler gambar:

Bagaimana? Mudah bukan. Semoga bermanfaat. Ditunggu koment nya.. :)