Selasa, 19 Maret 2013

Membuat Spoiler Di Blog

Spoiler,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...



Kalau di bawah ini saya coba pakai teks

Klik Show Untuk Membuka Spoiler.3

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... :)

Tidak ada komentar:

Posting Komentar