How To Add Code Parser To Blogger

Blogger is highly customizable unlike what you think...
 Today, I'm going to let you know how you can add code parser to your blogger blog so you can easily parse your html codes without looking for a third party.
 First thing first,
Paste the following CSS code into your template skin by going to
Templates> Customize> advance> add css

.ht-newform {
width: 400px !important;
margin-left: 10px;
nargin-right: 10px !important; 
}
.ht-encoder {
width: 400px !important;
height: 180px !important;
margin-left: 10%;
margin-right: 10% !important;
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 #FFBCBA;
background:#FFE6E5;
}
.ht3:hover {
color:#289728;
font: normal 12px sans-serif, verdana;
border-left:5px solid #CACACA;
background:#fff;
}
.ht4 {
color:#3C3C3C;
font: normal 12px sans-serif, arial;
border:1px dotted #FFBCBA;
background:#FFE6E5;
margin-bottom:4px;
}
.ht4:hover {
color:#cacaca;
border:1px solid #cacaca;
background:#fff;
}
.ht2 {margin-bottom: 2px; float: center;}
.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: #FFE6E1;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}

Once you've pasted the above,
Create a new page, you can give it whatever cute name you desire, then paste the code below in the html editor of your page editor.

<script type="text/javascript">
//<![CDATA[
function html2entitiesundefined){
var re=/[undefined<>"'&]/g
for undefinedi=0; i<arguments.length; i  )
arguments[i].value=arguments[i].value.replaceundefinedre, functionundefinedm){return replacecharundefinedm)})
}
function replacecharundefinedmatch){
if undefinedmatch=="<")
return "&lt;"
else if undefinedmatch==">")
return "&gt;"
else if undefinedmatch=="\"")
return "&quot;"
else if undefinedmatch=="'")
return "&#039;"
else if undefinedmatch=="&")
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="html2entitiesundefinedthis.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>

You are done, You can see demo here