Cara Pasang Parse dan Unparse HTML Tools

byDE GOBLOKERS -

Sebagai penulis dan pengelola blog maupun website tentu kita dituntut untuk mengerti proses parse kode dan unparse kembali kode iklan maupun kode HTML lain sebelum digunakan.

Parse Unparse HTML code Encode Decode Kode iklan adsense

Sebagai syarat agar kita dapat menempatkan kode iklan maupun kode html lain ke dalam template blog khususnya blogger blogspot, terkadang kita diharuskan memparsing terlebih dahulu agar kode tidak error.

Hal ini seringkali dihadapi saat kita menanam kode HTML seperti kode verifikasi meta, kode iklan Adsense, maupun kode iklan dari Advertiser lainnya yang langsung ditanamkan ke dalam mode HTML Template.

Apa itu Encode dan Decode?

Encoding HTML yaitu proses konversi dokumen yang berisi karakter khusus diatas kisaran normal seven-bit ASCII ke dalam bentuk standar. Jenis kode yang digunakan yaitu dengan mengirimkan ke server berbentuk informasi header, sehingga browser dapat dengan mudah mengurai kode tsb.

Sedangkan HTML decoding adalah kebalikan dari encoding. Dalam decoding proses karakter dikodekan khusus dan dikonversi kembali ke dalam bentuk aslinya.

Demo Parse Unparse Tools

Dibawah ini CatatanDroid berikan tutorial pemasangan blogtools yang dapat dipakai untuk Parse dan Unparse kode iklan maupun kode lainnya di blog sendiri. Yuk langsung praktek!

Cara Membuat Tools Parse Unparse Code

  1. Buka Blogger dan login dengan akun kalian
  2. Pada Dashboard utama pilih Pages (Halaman) lanjut pilih +New Page (+Halaman Baru)
  3. Ubah editor ke dalam mode edit HTML
  4. Masukan keseluruhan kode dibawah ini
    <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:#07ACEC;padding:1rem;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(/¡/g,"&iexcl;").replace(/¢/g,"&cent;").replace(/£/g,"&pound;").replace(/¤/g,"&curren;").replace(/¥/g,"&yen;").replace(/¦/g,"&brvbar;").replace(/§/g,"&sect;").replace(/¨/g,"&uml;").replace(/©/g,"&copy;").replace(/ª/g,"&ordf;").replace(/«/g,"&laquo;").replace(/¬/g,"&not;").replace(/®/g,"&reg;").replace(/¯/g,"&macr;").replace(/°/g,"&deg;").replace(/±/g,"&plusmn;").replace(/²/g,"&sup2;").replace(/³/g,"&sup3;").replace(/´/g,"&acute;").replace(/µ/g,"&micro;").replace(/¶/g,"&para;").replace(/·/g,"&middot;").replace(/¸/g,"&cedil;").replace(/¹/g,"&sup1;").replace(/º/g,"&ordm;").replace(/»/g,"&raquo;").replace(/¼/g,"&frac14;").replace(/½/g,"&frac12;").replace(/¾/g,"&frac34;").replace(/¿/g,"&iquest;").replace(/×/g,"&times;").replace(/÷/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,"¡").replace(/&cent;/g,"¢").replace(/&pound;/g,"£").replace(/&curren;/g,"¤").replace(/&yen;/g,"¥").replace(/&brvbar;/g,"¦").replace(/&sect;/g,"§").replace(/&uml;/g,"¨").replace(/&copy;/g,"©").replace(/&ordf;/g,"ª").replace(/&laquo;/g,"«").replace(/&not;/g,"¬").replace(/&reg;/g,"®").replace(/&macr;/g,"¯").replace(/&deg;/g,"°").replace(/&plusmn;/g,"±").replace(/&sup2;/g,"²").replace(/&sup3;/g,"³").replace(/&acute;/g,"´").replace(/&micro;/g,"µ").replace(/&para;/g,"¶").replace(/&middot;/g,"·").replace(/&cedil;/g,"¸").replace(/&sup1;/g,"¹").replace(/&ordm;/g,"º").replace(/&raquo;/g,"»").replace(/&frac14;/g,"¼").replace(/&frac12;/g,"½").replace(/&frac34;/g,"¾").replace(/&iquest;/g,"¿").replace(/&times;/g,"×").replace(/&divide;/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(/&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>
  5. Berikan judul yang sesuai, misal: HTML Parse Tools, HTML Decode Tools, Code Parsing Tools, dsb
  6. Publish page dan lihat hasilnya.

Penutup dan Kesimpulan

CatatanDroid mendapatkan inspirasi artikel ini dari blog jagoanredesign dengan beberapa perubahan tampilan agar menyesuaikan template yang CatatanDroid gunakan.

Demo

Jika sobat ingin mencoba tampilan yang berbeda silahkan menuju postingan artikel milik jagoanredesign. 

Akhir kata semoga tutorial tips blog singkat cara pasang tools html parser diatas dapat bermanfaat bagi sobat yang membutuhkan. Terima kasih dan Selamat mencoba! CatatanDroid

Tags

Post a Comment

Previous Post Next Post

Contact Form