How to Make HTML Parse Tool on Blogger

Most bloggers have used the html parser tool. When you want to enter html or javascript code into a blogger template, you usually need a tool to convert it into XML code.

HTML Parser Tool or also commonly called Parse HTML is a tool used to convert HTML or Javascript code into XML code that is compatible with blog templates. To use this tool you can easily find it on the internet because this tool is widely available online.

Actually, the way this tool works only converts some code into XML code like the following code:

 

• The '&' be '& amp' characters.
• The character '>' becomes '& gt'.
• The character '' '' (single quote) becomes '& # 039'.
• The characters '""' (Double Quote) become '& quot'.

You can also create the Parse HTML tool on your blog by creating a static page first. If you are interested in making it, here is How to add parse HTML tool on Blogger. please follow the steps.

How to Make HTML Parse Tool on Blogger

1. First of all, please go to the Blogger dashboard page
2. Then select the "Pages" menu
3. Then click "New Page"
4. The next step, please select the "HTML view" mode and enter the code below
5. The last step, please click "Publish" then see the results.

<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{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}

#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{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>

<div id="parser2">

   <textarea id="somewhere" placeholder='Write/paste the code here then click the Parse Code button'></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>Code copied to clipboard</h4>

   </div>

   <br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Code</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 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/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]></script>

Easy right? That's the discussion on How to Create HTML Parse Tool on Blogger. Hopefully it's useful for you. If there is anything you want to ask, please ask via the comments column below.