andreasandre . net andreasandre .net | sekedar tempat untuk berbagi | Blog Terbaik

Pada postingan sebelumnnya saya memamerkan foto sepatu buluk saya untuk lomba. Saya memasukkan beberapa foto ke postingan saya, tetapi saya juga tidak ingin postingan menjadi panjang. Akhirnya saya menemukan cara untuk mensiasati, yaitu dengan menggunakan spoiler.

Spoiler adalah …

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari posting, dengan tujuan untuk menghemat space halaman posting. Biasanya yang disembunyikan dalam spoiler adalah berupa gambar.

Cara memasang spoiler

1. Buat postingan baru add new post, dan pilih mode HTML (seperti ditunjukkan pada gambar)
2. Masukkan kode berikut ini

<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 = 'LIHAT LAGI'; }" name="button" type="button" value="buka dunk" /></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% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">

Teks yang akan disembunyikan di spoiler, semoga tips ini membantu

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

hasilnya akan seperti ini :

Jika ingin menyisipkan gambar ke dalam spoiler, kita hanya perlu memasukkan kode ini, dan meletakkannya di bagian berwarna merah pada kode di atas

<img src="http://alamat_gambar.jpg" alt="gambarA" width="300" height="400" />

jika ingin mengubah tulisan spoiler == tulisan  “buka dunk”, bisa mengedit pada bagian coding berwarna biru

semoga tips berbagi saya berguna dan silahkan di share dengan menekan tombol ini [fb]

info bermanfaat lainnya :

[adsensecamp]