Thông thường, khi giới thiệu code, chúng ta hay đặt chúng ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn. Vậy phải làm sao để phần giới thiệu ở nền blog chính thức, còn đoạn code ở trong một khung có nền tùy chỉnh ?
Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích. Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ
<strong>]]>>
1. Style 1:
/* CSS chen them .codeview
----------------------------------------------- */
.codeview {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i380.photobucket.com/albums/oo241/aqmin/1choiblog/code.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;
color:#000;
}
----------------------------------------------- */
.codeview {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i380.photobucket.com/albums/oo241/aqmin/1choiblog/code.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;
color:#000;
}
1. Style 2:
/* CSS chen them .codeview2
----------------------------------------------- */
.codeview2 {
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 #ff9600;
color:#000;
}
----------------------------------------------- */
.codeview2 {
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 #ff9600;
color:#000;
}
1. Style 3:
/* CSS chen them .codeview3
----------------------------------------------- */
.codeview3 {
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;
color:#000;
}
----------------------------------------------- */
.codeview3 {
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;
color:#000;
}
Ghi chú : Bạn có thể thay đổi phần chữ màu đỏ theo ý thích
Vậy là các bạn đã tạo xong thuộc tính đặt code trong một khung độc đáo rồi đấy .
Từ giờ , bạn có thể thêm code vào bất cứ đâu trên bài viết với thẻ <div> sau
<div class="codeview">
Điền code vào đây
</div>
Tiếp Tục. 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à >
- Kí tự : < sẽ chuyển thành <
- Kí tự : > sẽ chuyển thành >
Đó 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:
0 comments