How to Add HTML Parser to Your Page

July 24, 2015
HTML Parser is a tool that parse any html and javascript code into XML code. Sometimes it becomes urgent to add some html/javascript code into blogger template, so that, in that situation you should place your html code after parsing it into xml code. In this tutorial I am not only going to ask you to parse your code here but I am also going to tell you how to add parser tool into your blog's static page. If you add this parser in your own blog or site page, then you will not visit other site to parse your codes. HTML Parser is also known as HTML Encoder. From this tutorial, you will definitely know how to add this tool in your blog page without any error. Visit this Demo. 

This tool is very usable to change html code into xml code which seems like simple text. And this code could be easily put into your blogger template area and also in comment form. Moreover that it is mostly used to parse the adsense code.
HTML Encoder

Actually this only converts these following codes to encode into xml code:-

  1. '&' characters change into '&amp'.
  2. '>' characters change into '&gt'.
  3. '''' (single quote) characters change into '&#039'.
  4. '""' (Double Quote) characters change into '&quot'.

Follow the following step by step solution to add HTML Parser Tool in your blog or site page

  • First of all Create a Static Page.
  • Then just put the given code into your static page. (To add this code go to New Page>>HTML).

<form><textarea style=" height: 320px; width: 600px;" name="data1" ></textarea><input  type="button"  class="myclass" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"><input type="reset"  class="myclass"  value="Clear" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"></form> 

  • You can change width and height of the form.
  • Now go to blogger dashboard and then press on Template.
  • Click on Edit HTML, then add the following code just above the </head> code.
<script type='text/javascript'>//<![CDATA[function html2entities(){vara=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"&lt;";if(">"==a)return"&gt;";if('"'==a)return"&quot;";if("'"==a)return"&#039;";if("&"==a)return"&amp;"};//]]></script>




  • Now find this code ]]></b:skin> and put some given CSS to make your parser form more effective.
input.myclass{background:none repeat scroll 0 0 #888;border:2px dotted #777;color:#eef;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif}input.myclasshov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif}textarea{width:100%;color:#261fc0;font:14px verdana;background:#fffdf7;border:2px dotted #ff180d}textarea:hover{border:1px dotted #444}
  • Publish your page. 
  • Now you have inserted html parser or encoder in your own blog. Enjoy blogging. 
Thank you
Previous
Next Post »