Cara Membuat Tools Parse & Unparse Kode HTML di Blog

Sebagai seorang penulis dan pengelola blog, memahami proses parse dan unparse kode HTML sangatlah penting—terutama saat menampilkan skrip atau kode iklan dalam artikel.

Jika tidak dilakukan proses parse, maka struktur HTML atau JavaScript dalam artikel bisa berantakan, tidak terbaca dengan baik, bahkan merusak tampilan blog.

Apa itu Parse dan Unparse?

• Parse adalah proses mengubah karakter khusus (seperti <, >, &) menjadi bentuk aman untuk ditampilkan di halaman web.
• Unparse adalah kebalikannya, mengembalikan kode HTML ke bentuk aslinya agar bisa digunakan kembali atau disalin.

Umumnya ada lima jenis karakter yang akan berubah setelah diurai, apa saja?

Bayangkan jika kamu harus mengetik semua itu secara manual—bisa bikin jari pegal! 😅

Kenapa Harus Pakai Tools Sendiri?

Meskipun banyak tools serupa tersedia online, membuat tools parse & unparse sendiri langsung di blog punya keunggulan:

• Mempermudah akses langsung dari dashboard blog
• Menambah fitur interaktif untuk pengunjung
• Meningkatkan daya tarik blog, terutama blog bertema teknologi

Klik button demo diatas untuk melihat tampilan detailnya. Jika Anda tertarik membuatnya, silahkan ikuti langkah-langkah berikut ini.

Langkah Membuat Tool Parse & Unparse di Blogger

Buka dashboard blogger > halaman > buat halaman baru lalu salin semua kode dibawah ini dan pastekan dalam tampilan html.

<style type="text/css">
.parseUnparse{align-items:center;display:flex;justify-content:center}
.ctd-bt{margin: 0.5rem 0 1rem;width: -webkit-fill-available;justify-content:space-between;}
.ctd-bt,.ctd-bt-kiri,.ctd-bt-kanan{display:inline-flex;}
.ctd-pu{border-radius:0 0 5px 5px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;text-align:center}
.ctd-puA{width:-webkit-fill-available;height:200px;padding:1rem;border:0;box-shadow:inset 0 0 5px 1px rgba(0,0,0,.05);border-radius:.5rem;resize:none;color:gray;background:#fafafa;}
.ctd-btP,.ctd-btU,.ctd-btR,.ctd-btC{color:#fff!important;font-weight:700;background:#00BFFF;padding:0.7rem;border-radius:.25rem;border:none;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);transition:all .4s ease-in-out;text-transform:uppercase;margin:0 .25rem;cursor: pointer;}
.ctd-btP span, .ctd-btU span, .ctd-btR span, .ctd-btC span{align-self:center}
</style>

<div class="parseUnparse">
  <div class="ctd-pu">
    <textarea class="ctd-puA" id="ctd-boxPU" placeholder="&lt;!- Input kode yang akan di-Parse atau di-Unparse -&gt;"></textarea>
    <div class="ctd-bt">
      <div class="ctd-bt-kiri">
        <div class="ctd-btP" id="ctdP-HTML" onclick="convert();" type="button"><span>Parse</span></div>
        <div class="ctd-btU" id="ctdU-HTML" onclick="convert();" type="button"><span>Unparse</span></div>
      </div>
      <div class="ctd-bt-kanan">
        <div class="ctd-btR" onclick="document.getElementById('ctd-boxPU').value = '', document.getElementById('ctd-boxO').value = ''" type="button"><svg preserveaspectratio="xMidYMid meet" style="height: 20px; vertical-align: -0.125rem; width: 20px;" viewbox="0 0 24 24"><path d="M2.586 15.408l4.299 4.299a.996.996 0 0 0 .707.293h12.001v-2h-6.958l7.222-7.222c.78-.779.78-2.049 0-2.828L14.906 3a2.003 2.003 0 0 0-2.828 0l-4.75 4.749l-4.754 4.843a2.007 2.007 0 0 0 .012 2.816zM13.492 4.414l4.95 4.95l-2.586 2.586L10.906 7l2.586-2.586zM8.749 9.156l.743-.742l4.95 4.95l-4.557 4.557a1.026 1.026 0 0 0-.069.079h-1.81l-4.005-4.007l4.748-4.837z" fill="currentColor"></path></svg></div>
        <div class="ctd-btC" onclick="cpO()" type="button"><svg preserveaspectratio="xMidYMid meet" style="height: 20px; vertical-align: -0.125rem; width: 20px;" viewbox="0 0 24 24"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z" fill="currentColor"></path></svg></div>
      </div>
    </div>
    <textarea class="ctd-puA" id="ctd-boxO" placeholder="&lt;!- Output kode... -&gt;" readonly=""></textarea>
  </div>
</div>

<script type="text/javascript">
  function encodeString(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#039;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/&#161;/g,"&iexcl;").replace(/&#162;/g,"&cent;").replace(/&#163;/g,"&pound;").replace(/&#164;/g,"&curren;").replace(/&#165;/g,"&yen;").replace(/&#166;/g,"&brvbar;").replace(/&#167;/g,"&sect;").replace(/&#168;/g,"&uml;").replace(/&#169;/g,"&copy;").replace(/ª/g,"&ordf;").replace(/&#171;/g,"&laquo;").replace(/&#172;/g,"&not;").replace(/&#174;/g,"&reg;").replace(/&#175;/g,"&macr;").replace(/&#176;/g,"&deg;").replace(/&#177;/g,"&plusmn;").replace(/&#178;/g,"&sup2;").replace(/&#179;/g,"&sup3;").replace(/&#180;/g,"&acute;").replace(/µ/g,"&micro;").replace(/&#182;/g,"&para;").replace(/&#183;/g,"&middot;").replace(/&#184;/g,"&cedil;").replace(/&#185;/g,"&sup1;").replace(/º/g,"&ordm;").replace(/&#187;/g,"&raquo;").replace(/&#188;/g,"&frac14;").replace(/&#189;/g,"&frac12;").replace(/&#190;/g,"&frac34;").replace(/&#191;/g,"&iquest;").replace(/&#215;/g,"&times;").replace(/&#247;/g,"&divide;").replace(/À/g,"&Agrave;").replace(/Á/g,"&Aacute;").replace(/Â/g,"&Acirc;").replace(/Ã/g,"&Atilde;").replace(/Ä/g,"&Auml;").replace(/Å/g,"&Aring;").replace(/Æ/g,"&AElig;").replace(/Ç/g,"&Ccedil;").replace(/È/g,"&Egrave;").replace(/É/g,"&Eacute;").replace(/Ê/g,"&Ecirc;").replace(/Ë/g,"&Euml;").replace(/Ì/g,"&Igrave;").replace(/Í/g,"&Iacute;").replace(/Î/g,"&Icirc;").replace(/Ï/g,"&Iuml;").replace(/Ð/g,"&ETH;").replace(/Ñ/g,"&Ntilde;").replace(/Ò/g,"&Ograve;").replace(/Ó/g,"&Oacute;").replace(/Ô/g,"&Ocirc;").replace(/Õ/g,"&Otilde;").replace(/Ö/g,"&Ouml;").replace(/Ø/g,"&Oslash;").replace(/Ù/g,"&Ugrave;").replace(/Ú/g,"&Uacute;").replace(/Û/g,"&Ucirc;").replace(/Ü/g,"&Uuml;").replace(/Ý/g,"&Yacute;").replace(/Þ/g,"&THORN;").replace(/ß/g,"&szlig;").replace(/à/g,"&agrave;").replace(/á/g,"&aacute;").replace(/â/g,"&acirc;").replace(/ã/g,"&atilde;").replace(/ä/g,"&auml;").replace(/å/g,"&aring;").replace(/æ/g,"&aelig;").replace(/ç/g,"&ccedil;").replace(/è/g,"&egrave;").replace(/é/g,"&eacute;").replace(/ê/g,"&ecirc;").replace(/ë/g,"&euml;").replace(/ì/g,"&igrave;").replace(/í/g,"&iacute;").replace(/î/g,"&icirc;").replace(/ï/g,"&iuml;").replace(/ð/g,"&eth;").replace(/ñ/g,"&ntilde;").replace(/ò/g,"&ograve;").replace(/ó/g,"&oacute;").replace(/ô/g,"&ocirc;").replace(/õ/g,"&otilde;").replace(/ö/g,"&ouml;").replace(/ø/g,"&oslash;").replace(/ù/g,"&ugrave;").replace(/ú/g,"&uacute;").replace(/û/g,"&ucirc;").replace(/ü/g,"&uuml;").replace(/ý/g,"&yacute;").replace(/þ/g,"&thorn;").replace(/ÿ/g,"&yuml;")}function decodeString(e){return e.replace(/&quot;/g,'"').replace(/&#039;/g,"'").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&iexcl;/g,"&#161;").replace(/&cent;/g,"&#162;").replace(/&pound;/g,"&#163;").replace(/&curren;/g,"&#164;").replace(/&yen;/g,"&#165;").replace(/&brvbar;/g,"&#166;").replace(/&sect;/g,"&#167;").replace(/&uml;/g,"&#168;").replace(/&copy;/g,"&#169;").replace(/&ordf;/g,"ª").replace(/&laquo;/g,"&#171;").replace(/&not;/g,"&#172;").replace(/&reg;/g,"&#174;").replace(/&macr;/g,"&#175;").replace(/&deg;/g,"&#176;").replace(/&plusmn;/g,"&#177;").replace(/&sup2;/g,"&#178;").replace(/&sup3;/g,"&#179;").replace(/&acute;/g,"&#180;").replace(/&micro;/g,"µ").replace(/&para;/g,"&#182;").replace(/&middot;/g,"&#183;").replace(/&cedil;/g,"&#184;").replace(/&sup1;/g,"&#185;").replace(/&ordm;/g,"º").replace(/&raquo;/g,"&#187;").replace(/&frac14;/g,"&#188;").replace(/&frac12;/g,"&#189;").replace(/&frac34;/g,"&#190;").replace(/&iquest;/g,"&#191;").replace(/&times;/g,"&#215;").replace(/&divide;/g,"&#247;").replace(/&Agrave;/g,"À").replace(/&Aacute;/g,"Á").replace(/&Acirc;/g,"Â").replace(/&Atilde;/g,"Ã").replace(/&Auml;/g,"Ä").replace(/&Aring;/g,"Å").replace(/&AElig;/g,"Æ").replace(/&Ccedil;/g,"Ç").replace(/&Egrave;/g,"È").replace(/&Eacute;/g,"É").replace(/&Ecirc;/g,"Ê").replace(/&Euml;/g,"Ë").replace(/&Igrave;/g,"Ì").replace(/&Iacute;/g,"Í").replace(/&Icirc;/g,"Î").replace(/&Iuml;/g,"Ï").replace(/&ETH;/g,"Ð").replace(/&Ntilde;/g,"Ñ").replace(/&Ograve;/g,"Ò").replace(/&Oacute;/g,"Ó").replace(/&Ocirc;/g,"Ô").replace(/&Otilde;/g,"Õ").replace(/&Ouml;/g,"Ö").replace(/&Oslash;/g,"Ø").replace(/&Ugrave;/g,"Ù").replace(/&Uacute;/g,"Ú").replace(/&Ucirc;/g,"Û").replace(/&Uuml;/g,"Ü").replace(/&Yacute;/g,"Ý").replace(/&THORN;/g,"Þ").replace(/&szlig;/g,"ß").replace(/&agrave;/g,"à").replace(/&aacute;/g,"á").replace(/&acirc;/g,"â").replace(/&atilde;/g,"ã").replace(/&auml;/g,"ä").replace(/&aring;/g,"å").replace(/&aelig;/g,"æ").replace(/&ccedil;/g,"ç").replace(/&egrave;/g,"è").replace(/&eacute;/g,"é").replace(/&ecirc;/g,"ê").replace(/&euml;/g,"ë").replace(/&igrave;/g,"ì").replace(/&iacute;/g,"í").replace(/&icirc;/g,"î").replace(/&iuml;/g,"ï").replace(/&eth;/g,"ð").replace(/&ntilde;/g,"ñ").replace(/&ograve;/g,"ò").replace(/&oacute;/g,"ó").replace(/&ocirc;/g,"ô").replace(/&otilde;/g,"õ").replace(/&ouml;/g,"ö").replace(/&oslash;/g,"ø").replace(/&ugrave;/g,"ù").replace(/&uacute;/g,"ú").replace(/&ucirc;/g,"û").replace(/&uuml;/g,"ü").replace(/&yacute;/g,"ý").replace(/&thorn;/g,"þ").replace(/&yuml;/g,"ÿ").replace(/&amp;/g,"&")}function cpO(){var e=document.getElementById("ctd-boxO");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy")}var encode=document.getElementById("ctdP-HTML"),decode=document.getElementById("ctdU-HTML"),input=document.getElementById("ctd-boxPU"),output=document.getElementById("ctd-boxO");encode.addEventListener("click",function(){output.value=encodeString(input.value)}),decode.addEventListener("click",function(){output.value=decodeString(input.value)});
</script>

Tips

• Hindari mengubah struktur kode jika tidak paham fungsinya
• Jangan gunakan tools ini untuk menyembunyikan skrip berbahaya
• Cocok untuk blog yang sering membahas script HTML, JavaScript, atau tutorial coding

Penutup

Itulah tutorial lengkap cara membuat tools parse dan unparse HTML sendiri di Blogger. Dengan alat ini, kamu bisa lebih mudah mengatur tampilan script di artikel, dan pengunjung pun bisa menyalin kode dengan rapi.

Jika ada pertanyaan atau saran, silakan tinggalkan di kolom komentar. Jangan lupa cek artikel lainnya untuk tips blogging dan tutorial web lainnya!