Khung mã hóa code trên khung viết bình luận

Nếu blog của bạn chuyên chia sẻ các thủ thuật blog thì đôi khi cần đưa code vào bình luận nhưng phải mã hóa. Hôm nay, mình xin giới thiệu khung mã hóa code nằm ngay trên ô viết bình luận, khác hẳn khung mã hóa truyền thống. Bạn có thể xem đemo ngay tại blog này.







Để bắt đầu: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML

#Thêm css cho nút mã hóa

Chèn code bên dưới vào trên (trước) thẻ ]]></b:skin>

/*ma hoa code*/
.button {border: 1px solid #055;box-shadow: 0 1px rgba(255,255,255,.2) inset;background: #066;color: #fff!important;text-decoration: none!important;cursor: pointer;padding: 5px 10px;}
.button.medium {padding: 5px 10px;font-size: 12px;}

#Thêm scrip

Thêm đoạn mã dưới vào trên thẻ </head>

<script type='text/javascript'>
      //<![CDATA[
      function moreMahoa() {
        document.getElementById('mahoa-more').style.display = 'inline','200';
        document.getElementById('mahoa-toggle').innerHTML = '<a class="button medium closemh" href="javascript:lessMahoa()">Đóng Lại</a></span>';
      }
      function lessMahoa() {
        document.getElementById('mahoa-more').style.display = 'none','200';
        document.getElementById('mahoa-toggle').innerHTML = '<a class="button medium openmh" href="javascript:moreMahoa()">Mã Hóa Code</a>';
      };
      //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
//Character count script
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
//]]>
</script>
<script type='text/javascript'>var a=navigator,b=&quot;userAgent&quot;,c=&quot;indexOf&quot;,f=&quot;&amp;m=1&quot;,g=&quot;(^|&amp;)m=&quot;,h=&quot;?&quot;,i=&quot;?m=1&quot;;function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0&gt;=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c](&quot;Mobile&quot;)&amp;&amp;-1!=a[b][c](&quot;WebKit&quot;)&amp;&amp;-1==a[b][c](&quot;iPad&quot;)||-1!=a[b][c](&quot;Opera Mini&quot;)||-1!=a[b][c](&quot;IEMobile&quot;)){var k=j();k&amp;&amp;window.location.replace(k)};
</script><script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

#Thêm html

Tìm đoạn mã của khung viết comment như bên dưới, mỗi blog có nhiều đoạn nhưng trong mẫu simple của blog thì thường là đoạn cuối.

<span id='mahoa-toggle'>
<a class='button medium' href='javascript:moreMahoa()'>Mã Hóa Code</a>
</span>
<br/>
<span id='mahoa-more' style='display: none;'>
<form>
<font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'>
  <textarea name='data1' style='width: 500px; height: 180px;overflow:hidden; background:#333; padding:10px'/>
</font>
<font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'><br/>
<input class='abt2' name='button' onClick='html2entities(this.form.data1)' onMouseOut='this.className=&apos;abt2&apos;' onMouseOver='this.className=&apos;abt2 abt2hov&apos;' type='button' value='Convert'/>
<input class='abt3' name='Clear' onMouseOut='this.className=&apos;abt3&apos;' onMouseOver='this.className=&apos;abt3 abt3hov&apos;' type='reset' value='  Clear  '/>
</font>
</form>
</span>

Như vậy là chúng ta đã có một khung mã hóa tiện  lợi năm ngay trên ô viết bình luận rồi, rất đơn giản phải không. Chúc thành công !!!

Nguồn namkna.blogspot.com