Hướng dẫn tạo trang test code HTML/Javascript Blogspot

Mình sẽ hướng dẫn các bạn tạo một trang công cụ giúp người dùng có thể test code cho người dùng , có thể dùng cho blogspot và wordpress

Xem thử trang Demo

Demo blogspot

Hướng dẫn cài đặt

Bước 1: Đăng nhập vào Blogger

Bước 2: Chuyển sang tag Trang

Bước 3: Thêm trang mới và chuyển qua HTML

Bước 4: Copy toàn bộ code dưới vào

<center>

<!--Scrip gõ và xem code trong cùng trang có hai khung (Scrip 2)-->

<span style="color: #3366ff; font:30px Segoe UI;">Khung nhập mã cần thử</span>
<form name="form1" method="post">
<textarea name="code" wrap="soft" onclick="focus(this.code)" style="border:solid 1px #b9b8b6;padding:5px;width:100%;height:200px;scroll:auto;">
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display an alert box.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert("Hello! I am an alert box!");
}
</script>

</body>
</html>

</textarea></form>

<br>

<!--Button cho scrip 2-->
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Xem trước nhanh</button>

<!--Button cho scrip 1-->
<input type="button" name="do" value=" Toàn Màn Hình" onclick="DoHTML()">

<!--Button cho scrip 2-->
<button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Xoá mã</button>

<br>
<br>

<!--Scrip gõ và xem code trong cùng trang có hai khung (Scrip 2)-->

<span style="color: #339966; font:30px Segoe UI;">Khung xem trước kết quả</span>
<br>
<iframe src="about:blank" name="preview" style="height:250px;width:100%;border:solid 1px #b9b8b6;padding:5px;background:#ffffff" frameborder="0"></iframe>
<br>
<br>
</center>

Tags: Blogspot