Trang trí khung hiển thị code trên Blogger

Đôi khi bạn cũng muốn trang trí khung hiển thị các đoạn mã (code) cho đẹp mắt. Để thực hiện điều này, bạn cần phải tạo một class riêng cho đoạn mã, có thể đặt tên là "codeview" và đặt đoạn mã vào trong thẻ div, theo như bên dưới:

<div class="codeview">
{dán code đơn giản hoặc code đã mã hóa vào đây}
</div>

Phần trên sẽ được đặt vào trong bài viết tại vị trí muốn hiển thị code.
Để đăng được bài viết có hiển thị code thì phải tiến hành chèn một đoạn mã vào phần CSS của Template.

Vào Thiết kế (Design) - Chỉnh sửa HTML (Edit HTML) rồi chèn code của các kiểu bên dưới lên trên dòng code ]]></b:skin> trong Template.

Dưới đây là các kiểu định dạng CSS cho codeview.
1. Kiểu 1:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.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;
}

2. Kiểu 2:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}

3. Kiểu 3:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Chú ý: Nên tải các file hình ảnh qua đường link đánh dấu màu xanh về và upload lên webhost của riêng bạn để tránh hạn chế băng thông.

Tham khảo theo Fandung.com