Hiển thị code trên bloger (dạng 1)

Có rất nhiều cách để trang trí khung hiển thị đoạn code trên blog, có những cách rất cực hỳ không đơn giản (nhưng đẹp) nhưng cũng có những các rất đơn giản.
Bái viết trang trí khung hiển thị code trên Blogger của bạn Huỳnh Nhật Hà giới thiệu một số cách làm đẹp code, mình đăng lại và bổ sung thêm một số cách làm đẹp code để bạn tham khảo.

Dạng 1. 

Bước 1.

 Trước tiên 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 ]]>skin> trong Template (chỉ chọn 01 kiểu).

 Kiểu 1:

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

Kiểu 2:

Code:

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

Kiểu 3:

Code:

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

Bước 2.

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 vào bài đăng nơi muốn hiển thị đoạn code:

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

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