Membuat Tombol Spoiler, Buka - Tutup | HTML | Di Blog | --- Assalamualaikum, pada postingan ini, RezDown7 akan membagikan tutorial tentang bagaimana cara membuat tombol spoiler di blog. Tombol ini berfungsi untuk menyembunyikan suatu konten/isi yang dapat ditampilkan lagi, biasanya digunakan saat konten yang ingin dimuat kepanjangan, dan pada website forum biasanya spoiler digunakan untuk menyembunyikan gambar dan artikel yang kepanjagan.

 rezdown7.com | Membuat Tombol Spoiler, Buka - Tutup | HTML | Di Blog |Show/Hide HTML


Membuat Tombol Spoiler, Buka - Tutup | Show/Hide HTML sbb :
1. Jika anda sudah berada pada halaman untuk membuat spoiler, copy kode berikut :
<div id="spoiler">
<div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" name="button" type="button" value="rezdown7 spoiler" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

KONTEN ANDA DISINI...

</div><div id="hide"></div></div></div>
2. Silahkan masukkan konten anda pada tulisan berwarna merah , sedangkan untuk tulisan berwarna biru, silahkan ganti sesuai keinginan.
Ini contohnya :

3. Selesai

Jika ingin spoiler tanpa  tombol atau hanya teks aja gunakan kode ini :
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Hide]</a><br /> ---REPLACE KONTEN DISINI GAN--- </span>
Ini contohnya :
[Show]

-Selamat Mencoba-

9 komentar :

  1. Ane ucapkan terimakasih banyak gan atas inoformasi yang telah agan sampaikannya.

    BalasHapus
    Balasan
    1. sama-sama atas kunjungannya.

      Hapus
  2. artikel yang bermanfaat gan....

    BalasHapus
  3. beda sama yang lain nih bener-bener bagus

    BalasHapus
  4. sangat bermanfaat gan :D thanks

    BalasHapus
  5. Hatur nuhun kanggo elmuna, Kang :)

    BalasHapus

Dimohon Untuk Tidak Melakukan KOMENTAR SPAM!!
- Memasukkan Link Aktif
- Promo/Iklan
- Komentar Tidak Sesuai Postingan
- Posting Berualang-Ulang