How to Make Html Parse Tools

HTML Parse tool -If you install this tool on your blog or website. This way we don't need to visit third party websites to convert html code.
 
How to Make Html Parse Tools or Convert Ad Code Script on Blogger - For a Blogger , the presence of the Parsing tool is very useful, especially for blogs that discuss coding to help insert HTML script code in posts or articles on a site.

How to Create HTML Parsing tool in Blogger 2022
HTML Parsing tool in Blogger




Not only that, the html Parsing tool also functions as a tool to compress the adsense ad code before it is attached to the template, so there are many benefits that can be felt if you install this tool on your own blog or website. That way we don't need to visit third-party sites to convert the html code.

Well, for that it's good if we install the tool on the blog. To make the HTML Parse Tools tool in blogger itself is very easy, that is, just by using a static page as a place to store the html parse tools so that they are easy to reach and use. Then how to create and install this online html parse tool on the blog?

How to Make Html Parsing Tools or Convert Ad Code Script on Blogger

  1. Open your Blogger dashboard first.
  2. Then select the "Page" menu.
  3.  Next, create a new page by clicking on the “New Page” button at the top.
  4. Later there will be two mode options, namely Compose and HTML. Compose mode is used to write paragraphs and HTML mode is used to write code, select HTML mode to enter the code.
  5.  Then copy and paste the code for the HTML parse tool builder script below.

HTML Parsing tool code :

<style scoped="" type="text/css">
#parser2{position:relative;overflow:hidden}
#parser2 .btn,#parser2 .btn:active{background-image:none}
#parser2 .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:4px;cursor:pointer;transition:all .3s}
#parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}
#parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
#parser2 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
#parser2 .btn-primary{color:#fff;background:#3e51b5}
#parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
#parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
#parser2 .btn-danger{color:#fff;background:#f39c12}
#parser2 .btn-danger:focus{color:#fff;opacity:.9}
#parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
#parser2 .btn-info{color:#fff;background:#5bc0de}
#parser2 .btn-info:focus{color:#fff;background:#31b0d5}
#parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
#parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{border:1px solid rgba(0,0,0,0.05);height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:8px;padding:20px;transition:all .6s}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border-color:rgba(0,0,0,0.15);outline:0}
#parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
#parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
.collapse{display:none}
.alert-success{color:#222;background:#fff}
.alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
.close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0;font-size:13px;line-height:2}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px}
.alert br{display:none}
</style>
<br />
<div id="parser2"><textarea id="somewhere" placeholder="Write/paste the code here then click the Parse Code button"></textarea><br />
<div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert"><button class="close close-copy" onclick="document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();" type="button"><span aria-hidden="true">&#215;</span></button> <br />
<h4>Code copied to clipboard</h4></div><button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button> <br />
<div class="clear"></div><button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Copy code to clipboard</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();">Clean</button> </div>
<script type="text/javascript">//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/[email protected]/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]></script> 

Finally, save the page and see the result.

Why do we convert  HTML code or Parsing HTML  code?

As we all know, there are templates that do not accept the AdSense ad code due to an excuse or a problem with the template. What happens is that when adding the Adsense code does not match the template and the ad cannot be shown or the code appears in writing... To solve this problem there is a tool that changes the encoding or converting the code without Influence it and it becomes compatible and works without problems..
As well as copying the code to the clipboard with the click of a button.. There is also a button to clean the tool to be reused to modify another code.

Closing

That was a tutorial on how to make an html Parsing page on Blogger easily and has a responsive and clean look. You can also change the appearance separately from this HTML parse tool, for example, you can change the theme or size of the HTML Parsing toolbox according to your taste or according to the blog's appearance. Hope it is useful.