How to Make / Install Your Own Html Parse Tool on Blog

How to Make / Install Your Own Html Parse Tool on Blog

If you like to design or tamper with the appearance of a blog, of course you also know some of the tools commonly used for purposes around blogging and the like. One of them is the parse tool which functions to change certain code so that it can be stored in the html template. Usually it is like the adsense ad codes that you want to install in the blog template.

The Parse tool is a tool that functions to decipher or convert html codes into unique codes with the aim that the code can still be stored completely without losing the function to be displayed. Because, an error will occur if the code is not parsed first. Actually we can parse it ourselves by changing some of the code manually. But it will be faster and more practical if you use the parse tool.

Most bloggers usually use parse tools available online for free such as blogcrowds to parse some script code related to their blog needs. But in addition to using the parse tool, it turns out that we can also create or install our own parse tool on our blog, so that when we need it, we don't have to bother looking for the parse tool via a google search. An example of how it looks like below:

The installation of this HTML parse tool will be very suitable if your blog talks a lot about blogging tutorials and the like. How to make?. Check out the steps below.

How to Install Your Own Html Parse Tool on Blog

1. Open your blogger account.

2. Select the Pages menu or Pages.

3. Create a new page, select the html mode, and then put the following code into it.

<style scoped=""> .btn,.btn:active{background-image:none} .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:1px solid transparent;border-radius:4px;cursor:pointer} .btn:active:focus,.btn:focus{outline:0} .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0} .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)} .btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4} .btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40} .btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74} .btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a} .btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19} .btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925} .btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da} .btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85} .btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc} .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px} #parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111} #parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0} .btn-sm{font-size:12px;line-height:1.5;border-radius:3px;padding:5px 10px} .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px} .collapse{display:none} #parser2{position:relative} .alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6} .alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px} button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1} .close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2} button.close:focus{outline:0} .close:hover{opacity:1!important} #btnInfo h4{margin:0} #button-link{display:none} .clear{clear:both;display:block;margin-bottom:2px;} </style> <div id="parser2"> <textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes'></textarea> <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> <h4>Codes copied to clipboard!</h4> </div> <br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</button> <div class="clear"></div> <button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button> </div> <script type="text/javascript"> function convert() { var ele1 = document.getElementById("somewhere"); var replaced; replaced = ele1.value; replaced = replaced.replace(/&/ig, "&amp;"); replaced = replaced.replace(/</ig, "&lt;"); replaced = replaced.replace(/>/ig, "&gt;"); replaced = replaced.replace(/"/ig, "&quot;"); replaced = replaced.replace(/'/ig, "&#039;"); replaced = replaced.replace(/&#177;/ig, "&plusmn;"); replaced = replaced.replace(/&#169;/ig, "&copy;"); replaced = replaced.replace(/&#174;/ig, "&reg;"); replaced = replaced.replace(/ya'll/ig, "ya'll"); ele1.value = replaced; document.getElementById("button-link") .style.display = "inline-block"; document.getElementById("btn_clear") .style.display = "inline-block"; } function cdClear() { var wtarea = document.getElementById('somewhere'); wtarea.value = ''; document.getElementById("btnInfo") .style.display = "none",document.getElementById("button-link") .style.display = "none" } </script> <script src='https://cdn.staticaly.com/gh/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script> <script> //<![CDATA[ var clipboard = new Clipboard(".button-link"); clipboard.on("success", function (o) { console.log(o), document.getElementById("btnInfo") .style.display = "block", document.getElementById("somewhere") .value = "" }), clipboard.on("error", function (o) { console.log(o) }); //]]> </script>

4. Click Save or Save.

Please you can try it to test whether this parse tool works (work) or not. If it works well, then that's what we expect.

Oh yeah, besides putting it on pages, we can also put this parse tool in posts. The trick is to open the post, select the html mode enter the code save/publish. The result is the same. Thus the tutorial this time. Hope it is useful.