[SHARE] Cách tạo khung chứa code có nhãn

Xin chào các bạn, hôm nay là thứ mấy? Chắc chắn là...bóc lịch mà xem, ai mà biết được :))
Thứ mấy thì kệ cmnđ. Hum nay StarThảo-IT sẽ share cho ace khung chứa code có nhãn he. Không biết đã bác nào viết chưa ta?
Thôi kệ, cóc quan tâm - Chi Dân...
Demo:

CÁC BƯỚC THỰC HIỆN

Bước 1: Blogger => Chủ đề => Chỉnh sửa HTML
Bước 2: Các bạn tìm thẻ ]]></b:skin và chèn đoạn code sau vào trước nó:

Copy

/* CHEN KHUNG CHO ĐOẠN CODE */
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(//i.imgur.com/g4aNyi0.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;
max-height: 250px;
overflow: auto;
}
.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;
}

Các bạn thay i.imgur.com/g4aNyi0.gif thành hình ảnh mà bạn thích nhé.
Bước 3: Lưu mẫu lại nha
Bước 4: Bây giờ các bạn đăng bài, khi có chỗ cần khung chứa code , các bạn làm theo mẫu sau:

Copy

<div class="codeview">
Chèn code vào đây
</div>

Các bạn thay "chèn code vào đây" thành đoạn code của bạn.

LỜI KẾT

Như vậy, StarThảo-IT đã giúp các bạn tạo khung chứa code khá đẹp rồi đó, còn sử dụng hay không là tùy vào các bạn. Chúc các bạn thành công!