How to Add Html Code Tester to your blog/blogspot/wordpress or anyone, follow the steps below.
- Open a new page on Blogger,
- Copy the code below,
- Paste to the new page.
<!DOCTYPE html>
<title>Live HTML tester</title>
<h1 id="Pagetitle">Live HTML tester</h1>
<html>
<head>
</head>
<style>
h1
{
text-align: center;
}
textarea
{
vertical-align: top;
width:100%;
}
iframe
{
vertical-align: bottom;
width:100%;
}
</style>
<body>
<input id="browseOpen" type="file" accept=".html"/>
<textarea
rows="20"
id="HTMLdata"
placeholder="Enter HTML code"
onKeyPress="edValueKeyPress()
"onKeyUp="edValueKeyPress()">
</textarea>
<iframe id="test_iframe" src="about:blank" width="100%" height=400></iframe>
</body>
<script language="javascript">
var fileInput = document.getElementById("browseOpen");
fileInput.onchange = function() {
var fr = new FileReader();
fr.onloadend = function() {
var result = this.result;
html_string = result;
//alert(result);
var TheText = document.getElementById("HTMLdata");
TheText.innerText=result;
edValueKeyPress();
};
fr.readAsBinaryString(this.files[0]);
};
function edValueKeyPress(){
var edValue = document.getElementById("HTMLdata");
var html_string = edValue.value;
var iframe = document.getElementById('test_iframe');
var iframedoc = iframe.document;
if (iframe.contentDocument)
iframedoc = iframe.contentDocument;
else if (iframe.contentWindow)
iframedoc = iframe.contentWindow.document;
if (iframedoc){
iframedoc.open();
iframedoc.writeln(html_string);
iframedoc.close();
} else {
alert('Cannot inject dynamic contents into iframe.');
}
}
</script></html>