How to Install Parse and UnParse HTML Tools

Admin Geli July 13, 2022 0

 

As a condition that we can place the ad code or other HTML code into the blog template, especially blogger Blogspot, sometimes we are required to parse it first so that the code does not error.

This is often encountered when we embed HTML code such as meta verification code, AdSense ad code, or ad code from other Advertisers directly embedded into HTML Template mode.

What is Encode and Decode?

HTML encoding is the process of converting documents containing special characters above the normal seven-bit ASCII range into standard form. The type of code used is by sending to the server in the form of header information so that the browser can easily parse the code.

While HTML decoding is the opposite of encoding, in the decoding process the characters are specially encoded and converted back into their original form.

Demo Parse and UnParse HTML

Below, Droid provides a tutorial on installing blog tools that can be used to parse and UnParse ad code or other code on your blog. Let's practice right away!

Responsive Leaderboard Ad Area

How to Make Parse UnParse Code Tools

• Open Blogger and login with your account
• On the main Dashboard select Pages then select +New Page (+New Page)
• Change editor into HTML edit mode
• Enter the entire code below

<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 the code to be parsed or unparsed -&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 code... -&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>

  <center><a href="//www.bloggerprince.net">BloggerPrince</a></center>

• Give an appropriate title, for example, HTML Parse Tools, HTML Decode Tools, Code Parsing Tools, etc.
• Publish the page and see the results.

@How to Install Parse and UnParse HTML Tools

Responsive Leaderboard Ad Area

Tags : Blogging

Share: