Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Postingan Blog ~ Cara Membuat Spoiler di Postingan Blog ~ Cara Membuat Spoiler di Postingan Blog ~ Kali Ini saya akan memberikan tips bagaimana cara membuat poiler dengan mudah dan cepat.. Setelah sebelum-sebelumnya saya kebanyakan membuat posting yang tidak berhubungan dengan tips blogger, kali ini saya akan membuat postingan mengenai tips-tips dalam dunia blogger. ada spoiler yang saya buat maka dari itu artikel yang akan saya buat pada saat ini adalah mengenai cara membuat spoiler di blog.

Sebelum ke step cara membuat spoiler, ada baiknya saya menjelaskan mengenai pengertian dari spoiler. Spoiler adalah cara untuk menyembunyikan teks, video, gambar,maupun script dengan tujuan untuk menghemat ruang postingan.
Kalo masih bingung, saya berikan contoh gambar dari spoiler :

Itu adalah contoh dari spoiler yang terdapat di blog ini.Setelah sobat semua melihat gambar spoiler di atas,sekarang saatnya untuk membuat spoiler.

Ketika anda sedang membuat artikel,di sebelah kanan ada tulisan Edit HTML atau untuk lebih jelasnya silahkan lihat gambar dibawah ini :

Klik tulisan itu kemudian copy dan paste kode dibawah ini di bagian yang anda ingin membuat spoiler.


    <div>
    <div style="margin: 4px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <i><span style="font-weight: bold;">Klik show untuk membuka gan</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;">

    Isi spoiler,bisa berupa gambar,teks atau video.

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

Tulisan yang berwarna merah,bisa diganti sesuai dengan keinginan anda. Sedangkan yang berwarna biru adalah tempat anda menyimpan teks,gambar atau video. Untuk menampilkan gambar di spoiler,yang anda masukan adalah HTML gambarnya. Misalnya anda mengupload foto di tinypic.com,
hasilnya akan seperti ini :

Lihat yang saya tandai dengan kotak berwarna biru,itu adalah HTML dari gambar yang akan dimasukan ke dalam spoiler. Setelah itu,kemudian terbitkan entri atau publish artikel anda, kemudian lihat apakah spoiler yang anda buat sudah sempurna atau belum.

Dan spoiler pun jadi, anda bisa melihat contoh spoiler yang telah saya buat di artikel saya sebelumnya dan link artikel tersebut sudah saya berikan di atas. Mudah sekali kan?

Semoga Bermanfaat >>>