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.
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 "<"
else if (match==">")
return ">"
else if (match=="\"")
return """
else if (match=="'")
return "'"
else if (match=="&")
return "&"
}
//]]>
</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>
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<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.
