Webs & Blogs: Trang trí khung CODE, HTML, PHP (Đẹp + Có nút Select All + Nút Ẩn/ Hiện)

-Demo ảnh:

-Cài Đặt:

B1: Bạn tải file về và giải nén ra và upload lên host

B2: Vào Admincp ==> Styles & Templates ==> Edit Templates ==> headinclude và chèn dưới cùng:
 <script type="text/javascript"> function selectCode(a) { var e = a.parentNode.parentNode.getElementsByTagName('p')[0]; if (window.getSelection) { var s = window.getSelection(); if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } else { var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } } else if (document.getSelection) { var s = document.getSelection(); var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } else if (document.selection) { var r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } } </script>

B3: Vào Admincp ==> Styles & Templates ==> Edit Templates ==> BB Code Layout Templates
B4: Làm theo bên dưới (lưu ý là thay đổi width: cho phù hợp với Skin VBB của bạn):
-Ở bbcode_code thay toàn bộ bằng:
 <div style="margin:0px 0px 0px 0px"> <div class="smallfont" style="margin-bottom:0px"> <input type="button" value="Hiện CODE" style="width:80px;font-size:11px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện CODE'; }"> <div style="margin: 0px; padding: 0px; border: 0px inset;"> <div style="display: none;"> <center> <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="565" style="border: 1px dashed #ae42fa; margin: 10px; width: 565px;"> <tr> <td style="background: #f8eaff url(images/layout/code.gif) no-repeat top left; height: 29px;"> <div class="bbcode_container" >             <a href="#" onclick="selectCode(this); return false;"><input type="button" value="Chọn Tất Cả" /></a>  <pre class="bbcode_code"<vb:if condition="$vboptions['codemaxlines']">style="width: 565px; height:<vb:if condition="$blockheight<$vboptions['codemaxlines']">{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}*2}<vb:else />{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}}</vb:if>;"</vb:if>><p>{vb:raw code}</p></pre> </div> </td> </tr> </table> </center> </div></div></div></div>

-Ở bbcode_html thay toàn bộ bằng:
 <div style="margin:0px 0px 0px 0px"> <div class="smallfont" style="margin-bottom:0px"> <input type="button" value="Hiện HTML" style="width:80px;font-size:11px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn HTML'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện HTML'; }"> <div style="margin: 0px; padding: 0px; border: 0px inset;"> <div style="display: none;"> <center> <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="565" style="border: 1px dashed #578fd7; margin: 10px; width: 565px;"> <tr> <td style="background: #dfedff url(images/layout/html.gif) no-repeat top left; height: 29px;"> <div class="bbcode_container" >             <a href="#" onclick="selectCode(this); return false;"><input type="button" value="Chọn Tất Cả" /></a>  <pre class="bbcode_code"<vb:if condition="$vboptions['codemaxlines']">style="width: 565px; height:<vb:if condition="$blockheight<$vboptions['codemaxlines']">{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}*2}<vb:else />{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}}</vb:if>;"</vb:if>><p>{vb:raw code}</p></pre> </div> </td> </tr> </table> </center> </div></div></div></div>

-Ở bbcode_php thay toàn bộ bằng:
 <div style="margin:0px 0px 0px 0px"> <div class="smallfont" style="margin-bottom:0px"> <input type="button" value="Hiện PHP" style="width:80px;font-size:11px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn PHP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện PHP'; }"> <div style="margin: 0px; padding: 0px; border: 0px inset;"> <div style="display: none;"> <center> <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="565" style="border: 1px dashed #499c00; margin: 10px; width: 565px;"> <tr> <td style="background: #e7ffd9 url(images/layout/php.gif) no-repeat top left; height: 29px;"> <div class="bbcode_container" >             <a href="#" onclick="selectCode(this); return false;"><input type="button" value="Chọn Tất Cả" /></a>  <pre class="bbcode_code"<vb:if condition="$vboptions['codemaxlines']">style="width: 565px; height:<vb:if condition="$blockheight<$vboptions['codemaxlines']">{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}*2}<vb:else />{vb:math {vb:raw blockheight}*{vb:stylevar mid_fontSize}+{vb:stylevar mid_fontSize}}</vb:if>;"</vb:if>><p>{vb:raw code}</p></pre> </div> </td> </tr> </table> </center> </div></div></div></div>

B6: Edit lại theo ý bạn! Nếu bạn không muốn dùng chức năng Ẩn/Hiện BBCode thì bạn vào từng bbcode và xóa dòng này đi:
<div style="margin:0px 0px 0px 0px"> <div class="smallfont" style="margin-bottom:0px"> <input type="button" value="Hiện PHP" style="width:80px;font-size:11px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn PHP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện PHP'; }"> <div style="margin: 0px; padding: 0px; border: 0px inset;"> <div style="display: none;">

và dòng
</div></div></div></div>

* Source: sưu tầm

Thủ thuật Webs & Blogs

Thủ thuật Vbulletin

Trang trí khung CODE, HTML, PHP (Đẹp + Có nút Select All + Nút Ẩn/ Hiện)