Tôi tham gia blogger từ đầu năm nay.Qua một khoảng thời gian đủ ngắn khi gia nhập môi trường này, tôi cũng 'ngộ' ra được một vài điều nho nhỏ giúp cuộc sống của mình trở nên thú vị hơn.
Blogger - ngoài hiệu ứng làm cho con người ta chết mê chết mệt ra thì nó chẳng có mấy điều là thú vị cả. Nhất là mấy vấn đề liên quan đến giao diện hay một vài tiện ích html/javascript khó hiểu, gây ra cho tôi, người mới bước chân vào viết blog, rất nhiều rắc rối mà gần như là không thể nào khắc phục nổi.
Và thế là Tôi thường xuyên phải phục hồi lại hoàn toàn giao diện ban đầu ( số lần phục hồi giao diện còn nhiều hơn cả số bài viết đã đăng trên blog! ) vì luôn gặp phải bế tắc.
Công việc chỉ trở nên nhẹ nhàng hơn khi một dịp tôi định chỉnh sửa màu nền cho blog của mình nhưng lại bắt gặp đoạn css như thế này:
background:$(body.background); font: $(body.font); color: $(body.text.color);
Nó khác hẳn với những gì mà tôi từng biết với đống kiến thức nông cạn của mình về CSS. Vậy là tôi lao vào tìm hiểu và thấy các thuộc tính đó xuất hiện sau thẻ <b:skin><
- name: tên của biến (dùng trong code).
- description: mô tả của biến (dùng hiển thị lên cho người dùng biết trong Template Desinger - Chỗ mà tôi ghi chú là Tên biến ở ảnh trên).
- type: loại giá trị.
- default: giá trị mặc định.
- value: giá trị thực tế.
Để nhóm các biến lại với nhau, ta dùng thẻ <group></group>
- description: mô tả của nhóm.
- Selector: phạm vi ảnh hưởng.
/* Body */
body{
background:$(body.background);
font: $(body.font);
color: $(body.text.color);
}
/* Link */
a {
color:$(link.color);
text-decoration:none
}
a:hover, a:active,a:focus {
color:$(link.hover.color);
text-decoration:none
}
/* Heading */
h1, h2, h3, h4, h5, h6{
font:$(heading.font);
}
Biến được tham chiếu có dạng : $(ten_bien). Tên của biến phải khớp với tên của biến đã khai báo trong thuộc tính: name="ten_bien". Lúc này việc chỉnh sửa còn lại rất dễ dàng: sửa và xem trực tiếp ngay phía khung dưới tới chừng nào ưng ý thì thôi.
KHAI BÁO MỘT BIẾN CỦA RIÊNG MÌNH
Phần ở trên tôi chỉ giải thích mối liên hệ giữa các biến template khai báo trong code với những gì hiển thị tại công cụ Template Designer. Sau đây tôi xin lấy một ví dụ về khai báo một biến của riêng tôi. Bạn bỏ code này vào chỗ mà Blogger đã khai báo các biến khác:
<Variable name="my_color" description="Màu của tôi" type="color" default="#D54E1F" value="#D54E1F"/>
Lúc này, trong mã template ở chỗ chèn CSS, tôi sẽ sử dụng biến của tôi như sau:
a {
color:$(my_color);
}
Còn trong công cụ Template Designer sẽ hiển thị như sau:
Tính năng này vốn đã có từ lâu, trước khi Blogger ra Template Designer, nhưng ít thấy ai để ý và sử dụng.Hi vọng với bài hướng dẫn này sẽ giúp ít nhiều các bạn có thể tùy biến tốt hơn giao diện của mình.
No comments:
Post a Comment