Code đóng khung CODE trong blog

Trang trí cho khung hiển thị code :
- Để làm điều này, bạn chỉ cần tạo 1 class riêng cho code, ví dụ ta sẽ tạo class "codeview" và đặt code vào trong thẻ div, như bên dưới:

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

- Tất nhiên để làm được bạn phải chèn code CSS của class "codeview" vào trong code của template. Các bạn vào bố cục » vào chỉnh sửa code HTML » và chèn code của các style bên dưới lên trên dòng code ]]></b:skin>

- Sau đây mình sẽ giới thiệu các kiểu khác nhau cho các bạn:
1. Style 1:

Code CSS:

.codeviews {
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;
}

Hình minh họa:

2. Style 2:

Code CSS:

.codeviews {
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;
}

Hình minh họa:

3. Style 3:

Code CSS:

.codeviews {
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;
}

Hình minh họa:

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



.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.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;
}