Home Unlabelled How to Add HTML Parser to Your Page

How to Add HTML Parser to Your Page

Hello and Welcome to this site. In this post we will know how to add or create a HTML Encoder tool in Blogger blogs. There are many chances that you will need to parse the raw code so that the codes will work properly. I know that there are many Escape Tool available in the Internet which you can use. But you may not enjoy most of the benefits of using HTML Escape Tool in your own blog. Suppose some of your users want to add HTML entities in the comment of your Blogger blog but they are not able to add the HTML codes because Blogger Comment Box don't allow using that type of tags in comments. I know users can use another Escape Tool but it will not be a good idea as your users may get distracted from your Site. You can provide a link to your Escape tool above comment box in Blogger so that your blog users can use the Escape tool to parse the code before commenting. It will really give your Blog users an easy way to connect with your site.

How to Add HTML Encoder/Parser Tool in Blogger Blog

Well if you don't know what does HTML Encoder means than just read this article further. Actually it s an online tool that allows users to escape HTML characters (<, >, &, " etc.) into XML forms to ensure proper display of HTML Codes. This Escape Tool for Blogger will allow you to Escape Adsense ad code so that it can be used to place ads' in Blogger XML Templates. This HTML Encoder is not only limited to use for commenting and Parsing Adsense code but it can also be used to encode or parse any type of JavaScript and HTML Codes. I hope you have understand a atleast a little about HTML Encoder and Escape Tool. If you want to add this HTM Escape tool to your Blogger blog than follow the very easy steps given below.

Before proceeding to the tutorial on adding HTML Escape tool in Blogger blogs I would first like to make you familiar with steps. You will first need to create a new Blank Page and after that you will have to insert some codes in the HTML mode. Now you will save the page and that is it. Now follow the steps given below.
  • At first you will need to sign in to your Blogger Account if you haven't signed in to your Blogger Account yet.
  • Now click on the Blog Title in which you want to add HTML Encoder.
  • Go to Dashboard and click on Pages. Now create a new and fresh Blank Page so that you can add HTML Encoder on that page. You can also add HTML Encoder in the Posts Page if you wish to add the HTML Encoder in your Post Page.
  • Now Switch to HTML Mode of your new Blogger blog Page. If you are adding this Encoder in the post page than switch to HTML Mode in that case too.
  • It's time for codes. At first make sure that there aren't any codes in the HTML Editor. If their are some codes than at first delete that codes. Now add the code given below in the HTML Mode of Blogger Post Editor.
<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>
<br />
<div id="wrap">
<div id="wrap2">
<div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<form class="ht-newform">
<textarea class="ht-encoder" name="data1" placeholder="Add Codes Here and Click Encode to Parse it"></textarea>&nbsp;
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
&nbsp;<input class="ht2" onclick="html2entities(this.form.data1)" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="button" value="Encode" /> <input class="ht2" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="reset" value="Clear All" /> </div>
</form>
</div>
</div>
</div>
</div>
</div>
After adding the code given above in the specified place you can save your newly created page. If you would like to turn off comments on the HTML Encoder page than switch to Compose Mode and  than click on Options. Now choose your desired option for comments.
  • It isn't over yet. You have added the HTML codes and Scripts for the HTML Encoder but haven't changed it's look until now. If you will see your HTML Encoder now than it will look little bad. So, now we will add some CSS codes to customize the newly created Parsing Tool for your Blogger blog. Follow the steps given below to add the CSS code to customize HTML Encoder.
  • To add the CSS code you have to go to Templates > Edit HTML. Now in the HTML Page search for the code given below.
]]></b:skin>
  • Now add the CSS code given below just above/before "]]></b:skin>".
.ht-newform {
width: 400px;
margin-left: 100px;
}
.ht-encoder {
width: 400px !important;
height: 180px !important;
margin-left: 10%;
margin: 5px auto;
padding: 2px 2px 2px 6px;
font-family:Arial, sans-serif !important;
font-size: 18px;
color:#808080;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
-webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.ht-encoder:focus {
  width: 100%;
  color: #666;
  border: 1px solid #808080;
-webkit-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080;
  -moz-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080;
  box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080; 
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.ht-encoder:hover{
border: 1px solid #c0c0c0;
-webkit-box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0; 
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.ht3 {
color:#000;
font: normal 12px  sans-serif, verdana;
border:1px dotted #67A7E3;
background:#C9E4FF;
}
.ht3:hover {
color:#289728;
font: normal 12px sans-serif, verdana;
border-left:5px solid #289728;
background:#fff;
}
.ht4 {
color:#3C3C3C;
font: normal 12px sans-serif, arial;
border:1px dotted #67A7E3;
background:#C9E4FF;
margin-bottom:4px;
}
.ht4:hover {
color:#289728;
border:1px solid #289728;
background:#fff;
}
.ht2 {margin-bottom: 2px; float: right;}
.ht2 {
padding: 12px 12px;
background: #f4f4f4;
background: -moz-linear-gradient(top,  #f4f4f4 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%);
background: linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #808080;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
font-size:12px;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.ht2:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ht2:active {
outline: 0;
border-color: #aaa;
color: #FF0000;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}
.ht2 a:active {
color: #FF0000;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}
Well the above CSS code is same as the CSS code that I use in my HTML Encoder page. If you want to take a look at the HTML Encoder of this Blog than go to the HTML Encoder link given in Footer Navigation Bar of this Blog.
  • Now after adding the above CSS Code in proper place Quickly Preview your Template to see if their are some errors.
  • Save Template by clicking Orange Save Template Button.
  • Great! You have just inserted a HTML Encoder in the Static Page of your Blogger Blog.
I hope you enjoyed reading this post on adding HTML Encoder in Blogger Blogs. If you are facing any problems in adding this HTML Encoder and Parser tool in your Blogger blog than feel free to ask me. I will try to solve your problems if there are any. If you like this HTML Encoder then Please take some time to recommend this to your friends.
How to Add HTML Parser to Your Page How to Add HTML Parser to Your Page Reviewed by Ankit Sharma on 07:26 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.