Cara Pasang Spoiler Di Halaman Posting

Ketika suatu halaman postingan di blog memuat banyak gambar tentunya akan memberatkan loadingnya, begitupun saat menulis artikel dengan jumlah yang lumayan banyak maka akan membutuhkan panjang halaman tidak terhingga. Untuk meringankan loading blog, akibat terlalu banyak memuat gambar maupun tulisan tertentu, spoiler dapat diaplikasikan sebagai sarana pendukung untuk meringankan loading ataupun menghemat halaman konten.

Contohnya, ditunjukkan seperti di bawah ini.







Untuk membuat spoiler tersebut, silahkan copy dan paste kode di bawah ini di halaman postingan anda sesuai dengan selera.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input value="Buka" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler, bisa berupa tulisan maupun gambar atau keduanya
</div></div></div></div>

Pada bagian kalimat yang berwarna biru dapat diisi dengan tulisan maupun gambar atau keduanya, cara memasukan gambar dilakukan seperti biasa ketika akan mengupload gambar ke postingan.
 

0 comments:

Posting Komentar