Chào mừng các bạn đã quay trở lại với Blog NamIT
Hôm nay mình sẽ gửi đến các bạn hướng dẫn tạo khung mã hóa Code cho Blogspot/Blogger

HƯỚNG DẪN TẠO KHUNG MÃ HÓA CODE CHO BLOGSPOT

Demo

Demo
Click here

1. Đăng nhập vào Blogger
2. Vào mục trang và Tạo trang mới
3. Nhập tiêu đề trang
4. Chuyển sang chế độ viết HTML
5. Dán code này vào và save lại là OK

<style type="text/css">
  p {margin-top:20px;}
 code {color:#aa2;}
 
 #codes {
  border:none;
  width:98%;
  height:200px;
  margin:10px auto 10px;
  display:block;
  background-color:#444;
  padding:5px;
  font:normal 12px 'Courier New',Monospace;
 }
 
 #codes:focus {background-color:#3c3c3c;color:white;}

 .button-group {
  margin:0px auto 0px;
  text-align:center;
 }
 
 button,button[disabled]:active {
  background-color:#3c3c3c;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#999;
  padding:5px 10px;
  border:none;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
 }
 
 button:active {background-color:white;color:black;}
 button[disabled],button[disabled]:active {opacity:0.4;cursor:default;}

 #opt1,
 #opt2,
 #opt3,
 #opt4,
 #opt5 {
  display:inline-block;
  margin:0px 10px 0px 0px;
  vertical-align:middle;
  border:none;
  outline:none;
 }
</style>

<textarea id="codes" placeholder="Đưa code của bạn vào đây!" spellcheck="false"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Chuyển đổi</button>
<button onclick="cdClear();">Clear</button>
</div>
<input id="opt1" type="checkbox" />Chuyển ký tự <code>&amp;</code> sang <code>&amp;amp;</code><br />
<input id="opt2" type="checkbox" />Chuyển ký tự <code>'</code> sang <code>&amp;#039;</code><br />
<input id="opt3" type="checkbox" />Chuyển ký tự <code>"</code> sang <code>&amp;quot;</code><br />
<input checked="true" id="opt4" type="checkbox" />Chuyển ký tự <code>&lt;</code> sang <code>&amp;lt;</code><br />
<input checked="true" id="opt5" type="checkbox" />Chuyển ký tự <code>&gt;</code> sang <code>&amp;gt;</code>
<br />

<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<pre>");
    } else {
        //cv = cv.replace(/^/, "<i rel=\"pre\">");
  cv = cv.replace(/^/, "<pre>");
    }
    cv = cv.replace(/$/, "</pre>
");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>