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

Muhammad Rifqi Saifudin Abdi masyarakat yang senang menangkap momen dalam bentuk cerita. Bisa dihubungi di: - rifqimu@gmail.com - @m_rifqi_s (Instagram) - @mrifqi_s (Twitter)

Berbagi :