Cara Membuat Spoiler di Post atau Widget

Hai-hai! Kalau kalian pernah baca artikel kaskus atau forum-forum lainnya, pasti tidak asing lagi sama yang namanya spoiler. Gak tau apa itu spoiler? Yang kayak gini nih :

Klik Untuk melihat
Ini!

Spoiler ini bisa digunakan untuk berbagai macam keperluan, salah satunya untuk menyembunyikan gambar di postingan, sehingga gambar baru akan keluar setelah spoiler dibuka. Dengan kata lain, mempercepat loading blog kita juga :D

Nah, buat para blogger yang mau tau gimana cara buat tombol show/hide atau buka/tutup alias spoiler ini di postingan blog ataupun widget, #CoQi bakal kasih tau :

*) Untuk Postingan

1. Login ke akun blogspot kalian
2. Klik New Post
3. Ganti dari "Compose" ke HTML
4. Masukkan kode berikut

<div><div style="margin-bottom: 2px;"><i><b><small>Klik Untuk melihat</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
  
Letakkan artikel, gambar atau apapun di sini

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

5. Lanjutkan mengetik postingan, tapi jangan lupa pindah lagi ke "Compose"

*)Untuk Widget

1. Login ke akun blogspot kalian
2. Klik Tata Letak
3. Klik Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Masukkan kode berikut

<div><div style="margin-bottom: 2px;"><i><b><small>Klik Untuk melihat</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
  
Letakkan artikel, gambar atau apapun di sini

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

6. Klik Simpan.
Lebih jelasnya lihat gambar ini :

Nah, itu tadi Cara Membuat Spoiler di Post atau Widget, semoga membantu ya. Jika ada yang kurang jelas, silahkan ditanyakan :D

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Membuat Spoiler di Post atau Widget"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel