Add HTML Code Encoder Tool in Blogger Blog
- Log in your account >>Template>>Etidt html
- Now find the ]]><b:skin>
- Just press CTRL+F to find ]]><b:skin>
- 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 “<”
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>
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
Thanks for showing me the way.
Picreel
you are most welcome
Its too much effective specially for me. Thanks for sharing your valuable experience. waiting for another tutorial.
your most welcome for your valuable feedback
keep visiting