Skip to content Skip to sidebar Skip to footer

Cara membuat spoiler pada Blogspot

Spoiler adalah salah satu cara untuk menyembunyikan tulisan, video, gambar atau yang lainnya pada suatu artikel atau postingan.  Tujuan sebenarnya pada penggunaan spoiler adalah untuk menghemat tempat pada postingan dan juga untuk mempercepat loading.


Cara membuat Spoiler

  1. Spoiler untuk text.

  2. Gunakanlah kode berikut :


    <div id="spoiler">
    <div><input style="font-size: 11px; font-weight: bold; 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'BUKA'; }" name="button" type="button" value="CLICK DI SINI" /></div>

    <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
    <div style="color: #000000; background: none repeat scroll 0% 0% #eeeeee; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
    <p style="text-align: justify;">SISIPKAN KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI</p>
    </div><div id="hide"></div></div>

    Kode merah : digunakan untuk mengubah warna huruf dan background.

    Kode biru : sisipkan dengan kata, kalimat, atau link yang akan kita sembunyikan.

    Contoh:



  3. Spoiler untuk gambar

  4. Gunakan kode berikut:


    <div id="spoiler"><div>
    <input style="font-size: 11px; font-weight: bold; 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'BUKA'; }" name="button" type="button" value="CLICK DI SINI" /></div>

    <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
    <img class="aligncenter" src="http://2.bp.blogspot.com/-Cl5AD3AbM5Y/T6AD4uvDUTI/AAAAAAAAAMQ/pBIao3JOlmo/s1600/precise-pangolin.png" alt="UBUNTU" width="300" height="280" />

    </div><div id="hide"></div></div>

    Kode merah : digunakan untuk mengubah ukuran gambar

    Kode biru : alamat gambar yang kita sisipkan.


    Contoh:


Previous
Prev Post
Next
Next Post
nurhamim86
nurhamim86 A Mathematics Teacher who also likes the IT world.

Post a Comment for "Cara membuat spoiler pada Blogspot"