TEKNIK MEMBUAT SPOILER PADA BLOG

bagi para blogger yang mempunyai permasalahan dalam memperindah blognya, mungkin dapat mencoba menggunakan sebuah spoiler agar dapat mempersingkat tulisan di blog.

Mungkin sebagian dari kita sudah mengetahui apa itu spoiler, spoiler adalah cara untuk menyembunyikan beberapa tulisan atau gambar pada suatu postingan agar dapat menghemat space halaman. Spoiler sendiri sudah sering di gunakan pada web-web terkenal, seperti pada kaskus.

Bagi para bloger yang ingin menggunakan spoiler dalam blognya dapat mengikuti langkah-langkah berikut :

1. Pertama-tama saat kita akan mempostingkan tulisan kita pilih mode HTML

 
2. Lalu Masukkan script di bawah ini :

<div id="spoiler">
<div><input type="button" value="Buka" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
ganti dengan tulisan atau gambar yang ingin di sembunyikan
</div>
</div>
</div>

Teks yang disembunyikan/yang berada di dalam spoiler3. Jika image/gambar yang ingin dispoiler, ganti tulisan kuning di atas dengan kode lokasi image/gambar berada. (struktur dari image/gambar sudah terupload)

Seperti script di bawah ini :

<img src="http://lokasi-gambar-berada.jpg" height="ukuran tinggi" width="ukuran lebar gambar" alt="penjelasan gambar" />

4. selesai

contoh spoier :

tulisan yang di sembunyikan

source : http://mashendri.com/membuat-spoiler-di-blog.html