Now you can insert Adsense code /HTML or Javascript code Converter to your page on Website or Blog by using these below mention simple coding
Adding it to your site as a new HTML page
You now may have understood how the JavaScript runs.Now its time to implement in your site /Blog.- Copy the below code
- Open a word editor like notepad
- Paste it
- Save it and rename it With someone.html (.html is must.Otherwise it wont work)
- Upload it your server using some FTP Client
<html>
<head>
<script type="text/javascript">
function $(esc_tool){
return document.getElementById(esc_tool)
}
var char2entity = { "'" : ''', '"' : '"', '<' : '<', '>' : '>', '&' : '&'};
function escape_entities(str) {
var rv = '';
for (var i = 0;i < str.length; i++) {
var ch = str.charAt(i);
rv += char2entity[ch] || ch;
}
return rv;
}
function do_escape(e){
$('escaped').value = escape_entities(e.value)
}
</script></head>
<body>
<center>
<br>
<b>Enter raw code here</b>
<br/>
<textarea onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;"></textarea>
<br/><br/>
<b>Get escaped code here</b>
<br/>
<textarea id="escaped" onclick="this.select()" onfocus="this.select()" readonly="readonly" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;background:#f0f0f0;"></textarea>
</center>
</body>
</html>
Adding it to Blogger / Wordpress
- Open new post / Page -> Go to HTML section
- Just paste the following Code
- Publish it.
<script type="text/javascript"> function $(esc_tool){ return document.getElementById(esc_tool) } var char2entity = { "'" : ''', '"' : '"', '<' : '<', '>' : '>', '&' : '&'}; function escape_entities(str) { var rv = ''; for (var i = 0;i < str.length; i++) { var ch = str.charAt(i); rv += char2entity[ch] || ch; } return rv; } function do_escape(e){ $('escaped').value = escape_entities(e.value) }
</script>
<center> <br> <b>Enter raw code here</b> <br/> <textarea onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;"></textarea> <br/><br/> <b>Get escaped code here</b> <br/>
<textarea id="escaped" onclick="this.select()" onfocus="this.select()" readonly="readonly" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;background:#f0f0f0;">
</textarea>
</center>
Check Demo Here :HTML/JavaScript Code Converter For use in Blog Post
Another Method is :-
- 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;
}
Your comment are Welcome