Pages

Sunday, November 15, 2015

How to Add HTML Parse Tool To Blogger

HTML Parse tool for blogger also known as HTML encoder tool can be used to parse any HTML or javascript code into XML code. This post will enable you add an HTML parse tool to your blog's static page. Including this HTML parser in your blog will be helpful whenever you need to convert to display HTML codes in your blogger post. Most of these codes like the adsense code will be ineffective if added directly in your template or other codes in your post, unless it is parsed using a parse tool. Instead of visiting other sites to get this done, implement it on your blog. You can also refer others to your blog to use it and as usual, another way of increasing your blog's traffic or pageviews. See the demo of the HTML parse tool here

Also Read:  How To Show Adsense Below Blogger Post Title
                    How to Upload Blogger Templates
                    How to Insert Tables In Blogger Post 

How to Add HTML Parse Tool to Blogger

  • From your blogger dashboard, click on 'Pages', select 'new page' to create a static page.
  • Click on 'html' mode, then Copy the code shown below into the text field of the new page you're creating. (don't paste it in 'compose mode').

<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>


  • Save the page.
  • Next, goto your Template, click on 'Edit HTML'. Click inside your template, using ctrl+F search  for </head>
  • Copy the code below and paste code 'above' </head>


<script type='text/javascript'>
//<![CDATA[
function html2entities(){var
a=/[(<>"'&]/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>

  • Also search for ]]></b:skin> in your template. Copy the code below and paste 'above' ]]></b:skin>


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 the static page you created. View your blog to see the html parse tool in your blogger blog.