kali ini saya akan membuat tulisan tentang bagaimana cara membuat kotak spoiler pada postingan blog . nah sebelumnya saya juga gak bisa , namun setelah menelusuri di mbah google akhirnya saya pun bisa …. Mudah koq., banyak kq tips dan cara serupa di google.
untuk itu saya ingin berbagi juga kepada sobat blogger yang baru punya blog.. untuk yang udah mahir minta commentnya aja ya hehehehe… ngarep.com
Ok langsung aja ke tkp.
- Masuk ke dasbor blog sobat
- Klik tanda pencil atau buat entri baru ( kita akan membuat postingan baru)
- Nah… setelah sobat masuk ke halaman tempat pengetikkan postingan, di situ ada dua tombol COMPOSE & HTML, nah sobat pilih aja yang HTML.
- Kemudian sobat copy kode di bawah dan pastekan di kolom HTML
<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;">
GANTI DENGAN TULISAN, SCRIPT, ATAU GAMBAR SOBAT DISINI
</div>
</div>
</div>
<br> <br> <br>
<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;">
GANTI DENGAN TULISAN, SCRIPT, ATAU GAMBAR SOBAT DISINI
</div>
</div>
</div>
<br> <br> <br>
Catatan: ganti tulisan “GANTI DENGAN TULISAN, SCRIPT, ATAU GAMBAR SOBAT DISINI” pada kode dengan tulisan, script, atau gambar yang ingin sobat letakkan dalam kotak spoiler.
- kemudian Compose. Dan selesai
nah…. Jika semua tahapan sudah dilakukan hasilnya adalah sebagai berikut:
No comments:
Post a Comment