Saat menulis kode HTML di Blogger, kode tidak bisa langsung ditempel begitu saja. Hal ini karena Blogger menggunakan format XML yang akan membaca tag seperti <script>, <div>, dan lainnya sebagai kode aktif, bukan teks biasa.
Agar kode bisa ditampilkan dengan benar, kamu perlu melakukan parse HTML. Proses ini mengubah kode menjadi teks aman sehingga tidak dijalankan oleh sistem Blogger dan tidak menyebabkan error.
Banyak pengguna, terutama pemula, sering mengalami masalah saat memposting kode HTML, JavaScript, atau CSS di Blogger karena belum melakukan parse. Akibatnya, kode tidak muncul atau justru merusak tampilan artikel.
Kenapa Kode HTML Hilang Saat Diposting?
Karena Blogger membaca tag seperti <div>, <script>, atau <style> sebagai instruksi HTML, bukan sebagai teks biasa. Maka, perlu dikonversi agar aman dipublikasikan.
Contoh Penulisan Salah:
<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: 300px;"></div>Contoh Hasil (Akan Kosong):
Manual Convert Kode HTML ke Teks
Kamu bisa mengganti simbol tertentu menjadi entitas HTML, seperti ini:
<menjadi<>menjadi>"menjadi"
Namun, cara manual ini memakan waktu dan berisiko kesalahan.
Solusi Praktis: Gunakan HTML Encoder
Kamu bisa langsung menggunakan alat konversi otomatis di halaman ini:
Langkah-langkahnya:
- Salin kode HTML kamu
- Buka link generator di atas
- Tempelkan kode, lalu klik Convert
- Salin hasilnya dan tempel di postingan Blogger (mode HTML)
Dengan begitu, kode kamu akan tampil rapi dan aman seperti ini:
<h1>Hello World</h1>
<p>Ini paragraf di dalam HTML</p>
Dengan memahami cara posting kode HTML di Blogger dan melakukan parse dengan benar, kamu bisa menampilkan script tanpa error. Metode ini sangat penting terutama untuk tutorial coding agar pembaca bisa menyalin kode dengan mudah.
FAQ Post
Bagaimana cara menampilkan kode HTML di postingan Blogger?
Gunakan entity HTML seperti < dan > agar kode tidak dieksekusi, melainkan tampil sebagai teks.
Kenapa kode saya malah dijalankan oleh Blogger?
Karena kamu menulis langsung di mode HTML tanpa mengonversi karakter khusus. Pastikan gunakan HTML entity.
Apa cara cepat untuk mengonversi kode HTML?
Gunakan tool online HTML Encoder atau tambahkan tag <pre> dan <code> untuk format rapi.
Bagaimana membuat kotak khusus untuk kode?
Tambahkan CSS seperti border, padding, dan background pada tag <div> agar tampil rapi.
Apakah tag <pre> wajib digunakan?
Tidak wajib, tapi sangat disarankan agar kode tampil berformat dan mudah dibaca.
