How to Create HTML Parse Tool Page in Blogger Website

Parse HTML is to change certain codes into entity code or unique code. Usually this tool is used by bloggers to parse the adsense ad code, because if it is not parsed it will cause errors, besides that, this tool is also commonly used to parse scripts.

Some sample code before and after parsing :-

• & Becomes & 
• < Becomes &lt; 
• > Becomes &gt; 
• " Becomes &quot; 

Hey... You usually look for a code parse tool, what do you have to do on Google first? but don't worry, you can create an HTML parse tool on your blog page without having to search on google again. 

How to make this html parse tool is also fairly easy, just take a look at the tutorial below!

How to Create an HTML Parse Tool Page on Blogger

Step 1 :- First You Need To Go To Blogger.Com.

Step 2 :- Then Login with Your Blogger Account.

Step 3 :- Then Select The Post or Page Menu.

Step 3 :- Then Create a New Post or Page.

Note :- Add Your Post or Page Title And Description According To You Need.

Step 4 :- After Click on Html View.

Step 5 :- Then Copy And Paste The Tool Script Code Given Below.

<style scoped="" type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{border:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:4px}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#0ea6d8;cursor:pointer;font-family:'Open Sans',Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
button:active{background:#0095c6;}
button[disabled],button[disabled]:active{background:#0095c6;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
</style><br />
<textarea id="codes" placeholder="Write or paste the code here then click 'Convert" spellcheck="false"></textarea><br />
<br />
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Convert</button><button onclick="cdClear();">Clean Up</button></div>
<ul id="wrapin">
<li><br />
<input checked="true" id="opt1" type="checkbox" />Convert <code>&amp;</code> Becomes <code>&amp;amp;</code><br />
</li>
<li><br />
<input id="opt2" type="checkbox" />Convert <code>'</code> Becomes <code>&amp;#039;</code><br />
</li>
<li><br />
<input id="opt3" type="checkbox" />Convert <code>"</code> Becomes <code>&amp;quot;</code><br />
</li>
<li><br />
<input checked="true" id="opt4" type="checkbox" />Convert <code>&lt;</code> Becomes <code>&amp;lt;</code><br />
</li>
<li><br />
<input checked="true" id="opt5" type="checkbox" />Convert <code>&gt;</code> Becomes <code>&amp;gt;</code><br />
</li>
</ul>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&");
    if (opt2.checked) cv = cv.replace(/'/g, "'");
    if (opt3.checked) cv = cv.replace(/"/g, """);
    if (opt4.checked) cv = cv.replace(/</g, "<");
    if (opt5.checked) cv = cv.replace(/>/g, ">");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script><br />
<div style="clear: both;">
</div>
<div class="clear">
</div>

Step 6 :- Now Do not Forget to Publish your Page. Finished.

Conclusion :-

Well That is great tutorial on How to Create HTML Parse Tool Page in Blogger Website. Make it easy to make the parse tool, so, from now on you don't need to search for the parse tool on google, because you can already make it on your blog. Thanks.