Cara Membuat Spoiler Di postingan Blog

share

Berbeda dengan fasilitas read more. Spoiler merupakan sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode Html dan javascript. Serta mempunyai tujuan yang sama dengan read more yaitu menghemat space atau ruang dalam suatu postingan atau sidebar.

Nah sedikit perbedaan dengan read more adalah dapat mengurangi waktu loading, maksudnya adalah, jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Adapun caranya adalah sebagai berikut.

1) Terlebih dahulu pastikan anda telah login dan membuka halaman dashbor blogger.

2) Setelah itu buka halaman untuk membuat postingan, lalu anda aktifkan tab Edit HTML.

3) Kemudian pada bagian Edit HTML, Anda ketik kode seperti yang ada dibawah ini.

<div id="spoiler"> <div> <input name="button" 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 = 'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="CONTOH SPOILER" /></div> <div id="show" style="border-bottom-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: white; border-left-style: solid; border-left-width: 1px; border-right-color: white; border-right-style: solid; border-right-width: 1px; border-top-color: white; border-top-style: solid; border-top-width: 1px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; width: 98%;"> <div style="background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; color: black; margin: 0px; padding: 7px;"> <div style="text-align: justify;"> Ini adalah contoh dari spoiler yang ada pada postingan blog...!!!</div> </div> <div id="hide" style="display: none;"> </div> </div> </div>

4) Berikut adalah tampilan dari contoh kode yang akan diketik

5) Selanjutnya masih pada halaman untuk membuat postingan. lalu anda klik Tab Tulis. Maka fungsi spoiler telah aktif pada halaman editor tersebut. kalau spoiler belum muncul, maka ada kode yang salah.

.

Nah semoga artikel Cara Membuat Spoiler Di postingan Blog ini berguna bagi anda semua :)