Cara Membuat Spoiler Buka Tutup

Tutorial | Membuat Spoiler buka tutup ini dapat diterapkan di blog untuk menghemat tempat, dimana sebelumnya teks/gambar yang di spoiler disembunyikan jika di klik tombol maka akan munucul. Untuk contohnya seperti ini :

Lihat Gambar :

Kodenya seperti ini :

<div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <i><span style="font-weight: bold;">Lihat Gambar : </span></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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></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/AVvXsEhMPvWG9KEo8SIS4lvxTmYlONfqTqBxRZJB4-SDRQhGWhPPV_99CnN81Pec-rUGbangwe22bDdvUecCrcXd4qEit-ivdffFqoIRJSudv5oUFHN0bwmYv_FJdj9i4g0FiVAk0wFMmYTJ-wsi/s1600/slash-lyleawaismangettyimages.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPvWG9KEo8SIS4lvxTmYlONfqTqBxRZJB4-SDRQhGWhPPV_99CnN81Pec-rUGbangwe22bDdvUecCrcXd4qEit-ivdffFqoIRJSudv5oUFHN0bwmYv_FJdj9i4g0FiVAk0wFMmYTJ-wsi/s1600/slash-lyleawaismangettyimages.jpg" height="213" width="320" /></a></div>
    </div>
    </div>
    </div>

Ket :Yang diberi tanda merah merupakan kode yang diganti dengan keinginan sobat, dapat berupa teks biasa, kode ataupun gambar.

Manfaat

Cara Membuat Spoiler Buka Tutup

Share this