Bài thứ 3 trong series học web lần này mình muốn giới thiệu với các bạn là cách để tùy biến khung code đơn giản. Hiểu nôm na là như này: bạn thường thấy khung chứa code của blog sẽ chỉ có 1 form nguyên dạng như vậy và không thể phân biệt được đâu là HTML, đâu là CSS cũng như Javascript, Jquery. Chính vì thế, mình sẽ tạo ra sự khác biệt đó bằng cách đặt class hay id riêng cho chúng, viết css và chèn vào cú pháp hiển thị khung code thôi là được. Giờ thì bắt đầu nhé.
Cách thực hiện
Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Xóa toàn bộ CSS của khung code cũ đi và thay bằng đoạn mới sau:
code,pre {
display:inline-block;
position:relative;
background:#2a2a2a;
max-height:400px; /* Set chiều cao tối đa để hiển thị thanh cuộn */
font-size:14px;
color:#e8e8e8;
text-align:left;
overflow:auto; /* Hiển thị thanh cuộn dọc khi quá 400px */
border:1px solid #d3d6db;
margin:8px 0;
padding:10px;
white-space:pre-line; /* Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng */
width:97%;
padding-top:40px;
font-family:'Roboto',sans-serif;
}
code:after { /* Thêm thuộc tính after cho khung code, hiểu nôm na là chèn chữ hay kí tự gì đó trang trí */
content:"Code For You"; /* Ở trường hợp này là chữ hiển thị trên đầu mỗi khung code nha */
font-family:'Roboto',sans-serif;
color:#fff;
position:absolute; /*Set thuộc tính position là absolute cho nó đính trên vị trí cần chỉnh, cái này mình không rõ phải diễn đạt ra sao cho các bạn hiểu rõ được nữa nhưng nếu biết CSS cơ bản thì sẽ hiểu đc thôi*/
top:0; /* Điều chỉnh after lên trên cùng khung code */
left:0;
transition:all .3s; /* Hiệu ứng làm mượt, hãy thêm tiền tố -moz-, -o-, -webkit-... để giúp chạy trên nhiều trình duyệt */
width:100%;
text-align:center;
border-bottom:1px dashed #ddd;
padding:3px 0;
font-size:16px;
letter-spacing:1px; /* Khoảng cách giữa các kí tự */
background:#4a4a4a;
}
/* Set chữ cho từng class riêng biệt */
code.html-pc:after {
content:"HTML";
background:#47aae4;
}
code.css-pc:after {
content:"CSS";
background:#45a25d;
}
code.js-pc:after {
content:"Javascript";
background:#4ba2a7;
}
code.jquery-pc:after {
content:"Jquery";
background:#97ab28;
}
Bước 3: Lưu template lại.
Cách dùng
Ta vẫn viết bài như bình thường, đến phần chèn code thì bấm chuyển qua tab HTML để chèn cú pháp (lưu ý hãy mã hóa code trước khi chèn nhé không là nó sẽ chạy code của bạn chứ không hiển thị đâu, để mã hóa kí tự hãy sử dụng công cụ mã hóa này), hãy lựa chọn 1 trong 4 cú pháp sau đây:
<code class='html-pc'>Nhập code mã hóa tại đây...</code>
<code class='css-pc'>Nhập code mã hóa tại đây...</code>
<code class='js-pc'>Nhập code mã hóa tại đây...</code>
<code class='jquery-pc'>Nhập code mã hóa tại đây...</code>Lời kết
Về cơ bản thì tùy biến một khung code ở mức độ đơn giản nó chỉ có vậy thôi. Mắt thẩm mĩ của mình cũng không được tốt ở 1 số khoản nên nếu bạn đã hiểu cách tùy biến bằng CSS rồi thì hãy chỉnh sửa code đến khi hài lòng nhé.
