Membuat Spoiler Di Blog

Spoiler pada blog mungkin menurut saya berguna agar pada potingan tidak terlalu berat saat dibuka. contohnya postingan yang banyak menaruh gambar, tapi biasanya juga untuk menaruh skrip HTML. Langsung aja deh, lihat keterangan - keterangan berikut :

Contoh Spoiler nya bisa kalian lihat contoh spoiler dibawah ini, silahkan klik tombol "show" dibawah.

Klik Show Untuk Membuka Spoiler.1

Masih kurang puas, nih coba kalian buka spoiler dibawah ini, di wabah di bawah ini adalah FOTO KALIAN, ga percaya? coba buka deh...

BAAA KEEKKOOK

Kalau di bawah ini saya coba pakai teks

Klik Show Untuk Membuka Spoiler.3

Kalian pernah dengar ping blog? kalau belum mungkin layanan ini wajib kalian ketahui. Ping Blog adalah suatu layanan yang di sediakan oleh Ping Blog Service yang berfungsi untuk menyampaikan informasi dari suatu blog ke search engine. Manfaat nya yaitu untuk membantu mengoptimalkan blog kita di search engine seperti Google, yahoo, dll, mempengaruhi posisi artikel kita di serp, yang pasti akan berdampak pada visitor yang berdatangan ke blog kita dan juga PageRank. Ada banyak Ping Blog yang dapat kita manfaat kan, tapi tidak semua nya free a.k.a gratis sob, hehe... pasti kalian ngincer nya yang gratisan. dibawah ini adalah Ping Blog Service yang gratis dan paling banyak dipakai oleh para sobat blogger. 1.Pingomatic.com 2.Pingoat.com 3.Ping.in 4.Googleping.com Kalau mau, kalian cari lagi saja di mbah google karena memang masih banyak sekali. Untuk cara menggunakannya sangat mudah, kalian hanya tinggal memasukan nama blog kalian dan URL blog kalian. Selamat mencoba yah... ^_^ />

Cara membuatnya mudah kalian hanya tinggal perlu menambah kan script dibawah ini saat membuat postingan dan saya ingatkan menaruh skrip ini harus dalam tampilan HTML bukan pada tampilan Compose.

Di bawah ini adalah skrip Spoiler untuk Spoiler nomor.2 yang ada foto kalian nya :D

<div id="spoiler" style="display: none;">

**DI ISI DENGAN KONTEN ATAU TULISAN KALIAN**

</div>

<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Klik untuk melihat/menyembunyikan" type="button">Show/Close</button>




Teks yang berwarna biru kalian isi dengan konten masing - masing dan untuk teks yang Show/Close silahkan kalian ganti namanya sesuai keinginan kalian.

Di bawah ini adalah skrip Spoiler untuk Spoiler nomor.1 dan no.3 (lihat contoh spoiler diatas)

<div style="margin-bottom: 2px;">
Klik Show Untuk Membuka Spoile.1
<br />
<div style="margin-top: 5px; text-align: center;">
<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-top: 5px; width: 60px;" type="button" value="Show" /> </div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
**ISI DENGAN KONTEN ATAU TULISAN KALIAN**

</a></div>

Teks yang berwara merah bisa kalian ganti sesuai keinginan dan untuk yang berwarna biru isi dengan konten yang ingin kalian masukan.

Agak ribet ya? tapi gampang kok, selamat mencoba ya... :)

Source : http://d-ungu.blogspot.com/2012/10/cara-membuat-spoiler-di-blog.html