Sử dụng Template Designer để tùy biến giao diện blog

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

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><![CDATA[

* VARIABLE DEFINITIONS
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#667fdd"/>
<Variable name="body.font" description="Font" type="font"default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#858585" value="#656565"/>

Té ra, thì đó là các biến giúp chúng ta dễ dàng tùy biến giao diện hơn khi sử dụng Template Designer.


Giới thiệu một chút về Template Designer

Được hiểu là công cụ chỉnh sửa giao diện thông minh, giúp tùy biến các thuộc tính về hình nền, độ rộng, link, color.vv..được Blogger tích hợ sẵn giúp bạn dễ dàng chỉnh sửa giao diện blog.

Vì thông thường, ta hay điều chỉnh các thuộc tính như màu sắc, kích thước, kiểu chữ, ... bằng phương pháp chỉnh sử trực tiếp từ mã nguồn, upload template rồi xem thử.

Đối với những ai đã vững rồi thì no vấn đề. Nhưng với những bạn mới thì nó sẽ là tai họa nếu chỉnh sửa 'đống hỗn độn' ấy không đúng hoặc không biết chỉnh sửa ở đâu, vị trí cụ thể nào.

Vì vậy, xin được đóng góp một vài kiến thức cơ bản để sử dụng công cụ này và cũng để bạn có thể khai báo các biến template cho riêng mình nhằm nhanh chóng tùy biến lại giao diện blog mà không cần can thiệp vào code, chỉ cần dùng Template Designer


Mối liên hệ giữa Template Designer và biến

Tôi sẽ giải thích một vài thuộc tính quan trọng trong ví dụ trên: Mỗi thẻ Variable định dạng cho một biến. Các biến được định dạng sẽ được hiển thị tại Design / Template Designer / Advanced (giao diện mới là: Template / Customise / Advance).

• 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.

Để sử dụng các biến đó, chúng ta chỉ cần tham chiếu đến tên biến trong phần CSS

/* 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.