Với các blogger chuyên về thủ thuật như namkna thì tạo 1 trang end code là rất cần thiết. Bài viết này namkns sẽ hướng dẫn các bạn cách tạo một trang endcode cho blog của mình.
Với thủ thuật này thì khung Input và Output dùng chung trong 1 thẻ textra nhìn rất gọn gàng và đẹp mắt.

Xem minh họa: View Demo


Ảnh minh họa:

Tác dụng của khung Convert code (Endcode)

- Khi chèn 1 đoạn code vào nhận xét hay bài viết thì đoạn code đó sẽ biến mất. Do vậy phải đổi các  thẻ < sẽ chuyển thành &gt; và thẻ > sẽ bị chuyển thành &lt;để code có thể hiển thị tốt. 
- Nếu thay thủ công từng dấu < và > thì quá lâu và mất thời gian. CÔng cụ này sẽ giúp bạn việc đó.

Làm thế nào để thêm khung end code vào blog.

» Thêm CSS và Xml vào Template

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ  ]]></b:skin>
/*-------Form----*/
input.abt1 {
color:#FF8E1F;
font:10px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff;
}
input.abt1hov {
color:#0080ff;
font: bold 10px 'trebuchet ms',helvetica,sans-serif;
border:1px solid;
}
textarea {
width:100%;
color:#6E818C;
font:14px 'trebuchet ms',helvetica,sans-serif;
border:none; }
/*-------Form2----*/
input.abt2 {
color:#ffffff;
font: bold 14px  'trebuchet ms',helvetica,sans-serif;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQgJB3u_ciiUn-myznaK-8oq1oP3FGUJHCneiX70MjEf_C-XiBMnL-A8UGSlLZn85SNZ20Hp0R5mv4IER6th0WaYpBQEg0fuxXHnvb-FQ4k_dpuFMlq3lMEFzXPh6Vk-tQ-mnsTnOid8/s1600/convert-button-namkna-blogspot-com.gif);
width:149px;
height:39px;
}
input.abt2hov {
color:#000000;
font: bold 14px  'trebuchet ms',helvetica,sans-serif;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQgJB3u_ciiUn-myznaK-8oq1oP3FGUJHCneiX70MjEf_C-XiBMnL-A8UGSlLZn85SNZ20Hp0R5mv4IER6th0WaYpBQEg0fuxXHnvb-FQ4k_dpuFMlq3lMEFzXPh6Vk-tQ-mnsTnOid8/s1600/convert-button-namkna-blogspot-com.gif);
width:149px;
height:39px;
}

input.abt3 {
color:#ffffff;
font: bold 14px  'trebuchet ms',helvetica,sans-serif;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAICtR4mh9-Wu9c8JXV8-4yJaMTqKHYMdSvzn-AdpyrYG5Kq12_kCjDFwqTSgyy_IwWwvlY0enuzofyC4yt215DxmBxqyI8a7e58AtA3J32c5e_QVyF4e_NKJSzBK2p0R6lmqOt9hm-Vw/s1600/button-clear-namkna-blogspot-com.gif);
width:149px;
height:39px;
}
input.abt3hov {
color:#000000;
font: bold 14px  'trebuchet ms',helvetica,sans-serif;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAICtR4mh9-Wu9c8JXV8-4yJaMTqKHYMdSvzn-AdpyrYG5Kq12_kCjDFwqTSgyy_IwWwvlY0enuzofyC4yt215DxmBxqyI8a7e58AtA3J32c5e_QVyF4e_NKJSzBK2p0R6lmqOt9hm-Vw/s1600/button-clear-namkna-blogspot-com.gif);
width:149px;
height:39px;
}
5. Lưu Template lại.6. » Thêm Khuing convert
- Tạo 1 widget HTML/Javarscip và dán code bên dưới vào:
<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="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<form>
<p><font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'><img alt='Html character encoder' height='225' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1DOChk2Fgw2DD4wwhQn2ZvCSvZ-U4d7XC0JDynZ1zPGv8vZw28660JFXakZcIBdQFXY20LjcXqQg7NjzXmebQyYSOCXKkGg0YyiaaZJmkGXQO78thnBsBz8cpnqfAFzkkppj3WzAJs7A/s1600/guide-code-namkna-blogspot-com.png' width='478'/>
</font></p>
<p>
<font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'>
<textarea name='data1' style='width: 622px; height: 254px;overflow:hidden; background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3cRGjExxiqvNtw0-btx-j7pJ6QKMfnGUYrzRH_fp3uqa8pyf_tStUnuJegBZYu6-BErWMgcWHJoN11UYmQcmygW8dSpxLq0iA5C_AXKtRnvLb4p_n0CilQ_E66DHO9k9aRuJw0gabrIw/s1600/bg-code-namkna-blogspot-com.jpg&#39;); background-repeat:no-repeat; padding:10px'></textarea>
</font></p>
<p align=''><font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'><br/>
<input class='abt2' name='button' onClick='html2entities(this.form.data1)' onMouseOut='this.className=&#39;abt2&#39;' onMouseOver='this.className=&#39;abt2 abt2hov&#39;' type='button' value='Convert'/>
<input class='abt3' name='Clear' onMouseOut='this.className=&#39;abt3&#39;' onMouseOver='this.className=&#39;abt3 abt3hov&#39;' type='reset' value='  Clear  '/>
</font></p>
</form>
- Lưu lại là OK.