Membuat Tools Parse & Unparse di Blog

Sebagai penulis dan pengelola blog sudah seharusnya kita mengerti proses parse kode dan unparse kembali kode iklan maupun kode HTML sebelum digunakan. Hal tersebut, untuk memastikan tata letak iklan artikel tetap teratur. Tanpa menggunakan tool parse dan unparse, artikel dapat menjadi berantakan dan sulit dibaca.

Selain itu, blog dengan niche teknologi biasanya menggunakan alat ini untuk melampirkan teks skrip pada postingan karena kode tidak akan terbaca jika tidak melakukan parse terlebih dahulu.

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

Bayangin seberapa lama jika menulisnya secara manual? Daripada jari tangan kram mending pakai tools aja. Meski terbilang lebih mudah, namun kamu masi repot kesana-sini jika menggunakan alat yang bukan milik kita sendiri.

Sesuai judul postingan ini, saya akan membagikan cara membuat tool parse dan unparse sendiri untuk menambah fitur navigasi blog agar para pengunjung semakin tertarik.

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

Cara Membuat Tool Parse & Unparse

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>

Jika sudah, silahkan beri judul sesuka kalian lalu publikasikan. Perlu diingat jangan melakukan sembarang perubahan pada script karena bisa terjadi error dan tool tidak berfungsi.

Mungkin sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan tips seputar blogging.