0

CARA MEMBUAT SPOILER

YOGYAKARTA TETAP ISTIMEWA

Spoiler adalah sebuah tombol, jika di buka bisa menyebabkan keluarnya tampilan yang di sembunyikan. Yang namanya spoiler, adalah seperti di bawah ini :
Spoiler :

Caranya untuk membuat spoiler seperti contoh diatas adalah:
    1. Masuk ke akun blogger
    2. Buat Entri postingan baru
    3. Klik Edit HTML, Copy dan tambahkan kode dibawah ini:





    <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>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 = '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="Open" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;">
    ISI KONTEN YANG DI INGINKAN
    </div>
    </div>
    </div>
     Keterangan:
      Tulisan yang disorot warna hijau boleh di ganti sesuai selera.
      Contoh, saya memasukkan kode seperti ini:
      <div style="margin: 5px 20px 20px;">
      <div class="smallfont" style="margin-bottom: 2px;">
      <b>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 = '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="Open" /></div>
      <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
      <div style="display: none;">

      <a href="http://s1214.photobucket.com/albums/cc481/kohlee_jogja/?action=view&amp;current=xxx.jpg" target="_blank"><img alt="Photobucket" border="0" src="http://i1214.photobucket.com/albums/cc481/kohlee_jogja/xxx.jpg" /></a>
      </div>
      </div>
      </div>

      Hasilnya  menjadi :

      Spoiler :
      Photobucket

      Contoh lainnya:

      Spoiler :
      Photobucket

      0 Responses to “CARA MEMBUAT SPOILER”

      Post a Comment

      Terima kasih sudah berkenan mampir di gubuk online saya. Saya sangat senang sekali dengan kehadiran anda semua. Pengunjung dan tamu yang baik itu, adalah pengunjung yang selalu pamit / meninggalkan jejak komen di bawah ini. Sekian dan terima kasih, semoga bermanfaat dan semoga segala mahluk berbahagia.

      Blogger news

      CARI ARTIKEL

      Subscribe