How to Add Html Code Tester to Blog

How to Add Html Code Tester to your blog/blogspot/wordpress or anyone, follow the steps below.

  1. Open a new page on Blogger,
  2. Copy the code below,
  3. 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>

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.