Đặt code trong khung trên bài viết của Blogger

CSS điều khiển thuộc tính khung hiện code:

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre>  trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở.

Xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành &lt; và > thành &gt; và &lt; thành &amp;lt;) trước khi đặt giữa hai thẻ trên.
Đầu tiên bạn vào Bố cục > Nâng cao > CSS. Tạo CSS như sau:

/* Khung Hien thi code trong bai viet http://k3nvil.tk/ */
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://1.bp.blogspot.com/-_G4YcBDomBU/T3rRZAA6H7I/AAAAAAAACRg/IcTagtmAQ5g/s1600/site4it_framecodeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Sau đó mỗi khi đăng bài bạn hãy nhập lệnh sau trước khi viết code:

<div class="codeview"> Nội dung bài viết </div>

Chúc các bạn thành công!

Cập nhật: Với bộ khung này bạn sử dụng code sau:

<div> <div> <input 1""="" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }" style="font-size: 11px; margin: 0px; padding: 4px; width: 75px;" type="button" value="Xem" /> </div> <div> <div style="background: #; border: #4F4F4F 1px solid; display: none; padding: 4px;"> <div class="codeview"> Nội dung </div> </div> </div> </div>

Hoặc:

<div> <div> <input 1""="" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }" style="font-size: 11px; margin: 0px; padding: 4px; width: 75px;" type="button" value="Xem" /> </div> <div> <div style="background: #; border: #4F4F4F 1px solid; display: none; padding: 4px;"> <blockquote class="tr_bq" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 2px 2px 5px solid; background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.148438)), to(rgba(0, 0, 0, 0.0429688))); background-origin: initial; box-shadow: rgba(0, 0, 0, 0.496094) 2px 2px 5px solid; clear: both; font-family: georgia; font-size: 16px; line-height: 22px; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 15px; margin-top: 15px; max-height: 200px; min-height: 30px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"> Nội dung </blockquote> </div> </div> </div>