Hướng dẫn tạo khung mã hóa ký tự đặc biệt trong HTML cho Blogspot

huong dan tao khung ma hoa ky tu dạc trong html cho blogspot

Đây là một thủ thuật tiện ích rất hay và có ích đối với những bạn hay soạn thảo bài viết bằng HTML giống như mình. Với thủ thuật này, nó sẽ giúp bạn hiển thị các đoạn mã mà bạn muốn chia sẻ mà không bị mất đi.

Nguyên tắc hoạt động là nó sẽ giúp bạn chuyển các ký tự đặc biệt trở về dạng ASCII nhằm tránh việc bị HTML tưởng là chương trình và sẽ chạy nó khiến nó bị mất đi.

Để dễ hiểu hơn, bạn hãy thử nhập đoạn mã HTML bất kỳ mà bạn muốn vào khung ở trong trang Chuyển mã HTML, và điều đặc biệt của thủ thuật này là nó sẽ truy xuất kết quả ngay lập tức mà không cần phải chờ hay nhấn bất kỳ nút nào.

Bây giờ, chúng ta bắt đầu thực hiện.

Khung mã hóa ký tự đặc biệt HTML

Bước 1. Đăng nhập vào tài khoản Blogger.

Bước 2. Sao chép đoạn mã dưới đây và đặt ở nơi mà bạn muốn nó hiển thị, ví dụ như trong phần Chỉnh sửa HTML, trang tĩnh hoặc trang bài viết,...

(*) Chú ý: nếu bạn muốn đặt ở trong trang tĩnh hay trang bài viết thì nhớ chuyển qua phần HTML nhé!

<script type="text/javascript">
function $(esc_tool){
 return document.getElementById(esc_tool)
}
var char2entity = { "'" : '&#39;', '"' : '&quot;',  '<' : '&lt;', '>' : '&gt;',  '&' : '&amp;'};
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){
 document.getElementById('escaped-html').value = escape_entities(e.value)
}
</script>
<textarea id="code-html" onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" >Đặt đoạn mã HTML mà bạn muốn mã hóa vào đây</textarea>
<textarea id="escaped-html" onclick="this.select()" readonly="readonly" rows="10" >Nơi đoạn mã HTML được mã hóa</textarea>

Tới đây thì đã hoàn tất tạo khung mã hóa HTML rồi, nếu bạn muốn nó trông đẹp hơn, ví dụ như DEMO ở trên thì hãy để đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin> trong Chủ đề > Chỉnh sửa HTML.

#code-html, #escaped-html {width:100%;height:200px;padding:10px;font-family:monospace;border:1px dashed #069;background:#eff}