Membuat Kotak Spoiler Pada Postingan Blog Anda

Spoiler adalah sebuah fitur dalam blog fungsi utamanya untuk menyembunyikan teks, kalimat, gambar maupun kode. Fungsi nya mirip seperti text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. 

Saya yakin ndan sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita  mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali  dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

Contoh Spoiler

GANTI DENGAN SCRIPT, KALIMAT. ATAU GAMBAR NDAN DISINI

Scriptnya:

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">


ISI GANTI DENGAN TULISAN, GAMBAR ATAU SCRIPT SOBAT DISINI


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

catatan :
Biru dan Pink = ganti namanya terserah ndan
Merah = ukuran Panjang spoiler ( terserah ndan pengennya berapa)

Caranya: 
~ Masukan kedalam entri baru ndan yang bakal dipost. Ingat!! jangan masukkan kodenya dalam mode Compose, ganti dulu dengan mode HTML. Kalo tidak, isi teks jadi gak bisa keganti deh..
~ Ganti tulisan "ISI GANTI DENGAN TULISAN ATAU SCRIPT SOBAT DISINI" dengan apa yang ndan inginkan.
~ Lalu publikasikan.

Saran saya:
~ Bikin dulu semua isi postingannya dengan mode Compose, baru sisipkan kode spoiler di mode HTML. soalnya kalau ndan mau memasukkan teks bewarna, Link, dan Gambar harus memasukkan script htmlnya juga. Salin Tulisan ndan dalam mode HTML yang mau dikasih spoiler, trus masukkan salinannya kedalam isi kode spoiler tadi..
Mudah kan? jadi ndan gausah bikin-bikin script untuk isi spoiler lagi.. :)


kalau masih kurang mengerti, tanya dikolom komentar ya :)
Trims..

Tweet

Ikuti @CeritaCiiJail