Chèn code vào bài viết + trang trí cho khung hiển thị code

Đây là một trong những thủ thật cơ bản mà các trang thủ thuật khác ở việt nam đều đã có đăng, tuy nhiên ở blog của mình thì chưa có bài hướng dẫn thủ thuật này. Nhân đây có người hỏi về thủ thuật này, mình cũng xin post lại.

Ở bài viết mình sẽ nói về 2 vấn đề : 1 là làm thế nào để chèn code vào bài viết, thứ 2 là trang trí cho khung hiển thị.

A. Chèn code vào bài viết:

- Như chúng ta đã biết, khung sọan thảo của blogspot cho phép hiển thị hầu hết code HTML, vì thế khi bạn chèn code vào bài viết thì code đó cũng sẽ được hiển thị.

- Để có thể hiển thị được chúng ngòai layout, bạn phải chuyển 1 vài kí tự đặc biệt trong mã code HTML thành các kí tự khác.

- Về cơ bản, ta chỉ cần thay đổi 2 kí tự đặc biệt là < và > , xem bên dưới:

- Đó là cách thực hiện bằng tay khi code của bạn chỉ có vài dòng, nhưng đối với những đọan code dài thì sao, ta không thể ngồi đó mày thay thế tất cả chúng, rất tốn thời gian. 

- Để khắc phục điều này, đã có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.

- Các bạn vào địa chỉ này : http://blogcrowds.com/resources/parse_html.php, giao diện sẽ trông như bên dưới:

- dán code mà bạn cần chuyển đổi vào khung rồi nhấn Parse sau đó ta sẽ được code đã được mã hóa ở khung 1, tiếp theo ta coppy code đã được mã hóa ở khung này dán nó vào bài viết của bạn, nếu muốn mã hóa tiếp code khác, bạn chèn code vào khung thứ 2 và tiến hành tương tự (lưu ý: fải là khung thứ 2) (xem hình minh họa)

B. 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 "codeviews" và đặt code vào trong thẻ div, như bên dưới:

<div class="codeviews">
Dán đoạn code vào đây
</div>

- Tất nhiên để làm được bạn phải chèn code CSS của class "codeviews" 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

Lưu ý trong code ở Style 1 và Style 3 có 2 url màu đỏ và màu tím cá bạn có thể thay bởi 2 url sau: 
https://www.cx.com/0/filedata/get/z9T8-Dw5EeGQRhIFOARY_Q?download=true
https://www.cx.com/0/filedata/get/HxB_vjw6EeGQRhIFOARY_Q?download=true
Chúc các bạn thành công.

Tham khảo từ Fandungblog