Chèn tiện ích mã hóa code trước khung comment của blogger

Như các bạn đã viết trong khi comment nhiều khi chúng ta phải chèn một đoạn mã sử dụng các ký tự đặc biệt (như < > '" &) vào comment. Nếu cứ thế chèn vào thì nó sẽ không hiển thị được vì thế giải pháp đưa ra là phải mã hóa nó để có thể hiển thị được ở phần comment. Bài viết này mình sẽ hướng dẫn các bạn cách chèn thẳng một tiện ích mã hóa code vào trước khung commmet của blogger.

Demo

Cách chèn tiện ích mã hóa code trước khung comment của blogger

1. Đăng nhập vào blog.
2. Chọn mẫu (template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code bên dưới vào trước 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>

5. Yêu cầu là chèn đoạn mã đó trước khung comment do vậy bạn hãy tìm đoạn mã của khung comment như sau:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

- Dán vào trước nó đoạn code bên dưới (Lưu ý một blog có nhiềuđoạn mã như trên nên bạn phải chèn đúng đoạn cần thiết nó mới hiển thị nha: 

<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>

Giờ là điều chỉnh nút mã hóa code cho đẹp bạn chỉ cần dán đoạn code sau vào trước thẻ ]]></b:skin>

.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;}

Giờ lưu mẫu lại và kiểm tra kết quả bạn đã làm được nha.