\

Cara Memasang Tombol Hide Show (Spoiler) Pada Blog

\ \ 5 comments
Pada kesempatan kali ini saya mau berbagi tutorial kepada sobat semua tentang cara membuat tombol hide show, atau yang lebih sering disebut dengan nama spoiler. Lalu kenapa kita belajar membuat spoiler? karena spoiler berguna untuk mendelikkan konten atau yang lainnya sehingga membuat halaman blog menjadi lebih simpel. Langsung saja saya berikan, contohnya seperti di bawah ini:







Ini namanya spoiler







Untuk cara buatnya pasang script di bawah ini di gadget atau di postinagnmu.

  <div style="text-align: center;">
<div class="button-spoiler">
<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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Perlihatkan'; }" type="button" value="Contoh Tombol Spoiler" /></div>
<div class="spoiler">
<div style="display: none;">


<div style="border: 3px inset rgb(51, 51, 51); font-size: small; padding: 10px; text-align: left;">




Ini namanya spoiler





</div>
</div>
</div>
</div>

Keterangan: Tulisan Sembunyikan: nama tombol untuk mendelikkan konten.
                   Tulisan Perlihatkan: nama tombol untuk memunculkan konten.
                   Tulisan Contoh Tombol Spoiler nama tombol pada saat pertama muncul.
                   Tulisan  Ini namanya spoiler ganti dengan konten sobat, misal gambar,script dll.
Catatan: Kalau memasang script di atas pada postingan taruh pada Edit HTML bukan di Compose

Sekian tutorial dari saya semoga dapt membantu sobat semua.
Labels:

Artikel Sejenis

loading..

5 comments:

  1. Software House Production9 Jan 2011, 19.56.00

    Sip...sob..Artikel yang bagus

    BalasHapus
  2. Unknown10 Jan 2011, 09.05.00

    ea makasih.

    BalasHapus
  3. Unknown15 Mar 2012, 14.53.00

    masih bingung gan

    BalasHapus
  4. Unknown15 Mar 2012, 17.59.00

    masih bingung gimana sob, emang agak berantakan kok post say, coz waktu saya post tutorial ini saya baru belajar ngeblog

    BalasHapus
  5. Pasang Iklan Gratis29 Mei 2012, 16.11.00

    mantap gan, makasih atas ilmunya, silahkan pasang iklannya disitus ane gratis gan permanen dan premium

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">Kode Anda</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">Kode Panjang Anda</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL Gambar</i>
Untuk menyisipkan judul, gunakan tag <b rel="quote">Kata-kata Anda</b>