Membuat Spoiler Buka Tutup

Membuat Spoiler Buka Tutup, Spoiler biasanya digunakan untuk menghemat tempat postingan atau tulisan dan juga untuk menyembunyikan gambar, Code, atau Link yang panjang saat anda mengklik tulisan "show" maka akan terlihat hasil yang sesungguhnya atau ukuran yang sebenarnya.

Contoh Spoiler :

Masukan Disini

Jika ingin memasang silahkan ikuti di bawah ini :


Kode Spoiler Text :
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;">Masukan Disini</div>
</div>
</div> 

*Ganti yang berwarna merah dengan isi spoilermu.

Kode Spoiler Gambar



<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiik1665xq5TLVP6uHKlaS7X0lb4WEiUnkoj8khg2DnEi8chj6K_4CfIJYJFZJyBBGxHp4fohY1rs0Fwl0jFaqDpphNdxFUwdyYA63ayGK1DQEJUD2Jp-E0NrLwZRE3xGQxYoecp1VmML0/s1600/images.jpg" alt="monyet" width="300" height="280" /></div>
</div>
</div>

*Ganti yang berwarna merah dengan url gambar spoilermu.






Cara memasangnya :

Widget :

1. Login Blogger
2. Masuk ke Tata Letak >> Tambah Widget >> html Javascript
3. Masukan Code Tersebut

Posting : 


1. Login Blogger
2. Masuk ke buat posting
3. Taruh kode spoiler di HTML.
4. Terbitkan


Selamat mencoba. Tutorial ini sudah berhasil di coba. apabila tidak bisa mungkin anda salah mencopynya

Artikel lainnya