Hey Congratulation: today we will learn “how to add html code encoder tool in blogger blog ,there are many reason that you will need to add “html encoder tool” in your blog, many when you write some article you need to add some html code in your post but you can’t do it because blogger does not support html character in post and pasge and in comment,but after adding this “html encoder tool” you can easily convert html character in simple text and put them where you want show html character, i know that there are many tools online to convert html character,but you can’t enjoy some benefits, like a if some visitor want to add “html code” in comment box they can’t add the html because blogger comment form does not allow to add html character in comment form but if you are added this tool in your blog then your visitor easily convert html code in simple text and put them into comment box , because today we will learn “how to add html code encoder tool in blogger blog” to add this tool follow these steps .

 

Add HTML Code Encoder Tool in Blogger Blog

 

  1. Log in your account >>Template>>Etidt html
  2. Now find the ]]><b:skin>
  3. Just press CTRL+F to find ]]><b:skin>
  4. Now Copy the below code and past it  before the ]]><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: rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
-webkit-box-shadow: inset 0 1px 2px rgbaundefined0,0,0,0.2), 0 0 0 6px #e0e0e0;
-moz-box-shadow: inset 0 1px 2px rgbaundefined0,0,0,0.2), 0 0 0 6px #e0e0e0;
box-shadow: inset 0 1px 2px rgbaundefined0,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 rgbaundefined0,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-gradientundefinedtop, #f4f4f4 0%, #f1f1f1 100%);
background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#f4f4f4), color-stopundefined100%,#f1f1f1));
background: -webkit-linear-gradientundefinedtop, #f4f4f4 0%,#f1f1f1 100%);
background: -o-linear-gradientundefinedtop, #f4f4f4 0%,#f1f1f1 100%);
background: -ms-linear-gradientundefinedtop, #f4f4f4 0%,#f1f1f1 100%);
background: linear-gradientundefinedtop, #f4f4f4 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradientundefined 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 rgbaundefined255,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 rgbaundefined0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgbaundefined0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgbaundefined0, 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;
}

5.Now Save Your template

6. Now Click on the  page and create new  page where you want show the html code encoder box, and give the page name and change page mode to “html” if there some code please remove them now copy the below code and past it into page make sure there not any code in “html” and publish the page

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

Now copy any html code and past the code in text box and click on the encode button to decode html
I hop it will be work enjoy