Đặt tên các thuộc tính trong template Blogger bằng CSS Variables để chỉnh sửa trong "trình thiết kế mẫu"

VnTim™ {^-^} Thông thường để điều chỉnh các thuộc tính màu sắc chữ, kích cỡ chữ, kiểu chữ, ... của blog làm tại Blogger, ta thường dùng phương pháp thử: Download template -> Điều chỉnh CSS -> Upload template -> Xem thử; nếu chưa vừa ý thì lặp lại quá trình đó!

Làm vậy sẽ mất nhiều thời gian và công sức. Thực tế, Blogger cho phép chúng ta tạo các biến CSS (variables) trong template và tận dụng công cụ Template Designer của nó để chỉnh các thuộc tính này và xem trước chúng ngay trong phần Dashboard mà không phải lặp lại các thao tác trên.

Bài viết này trình bày cơ bản về cách làm đó.

Ở đây chỉ lấy 1 VD: thiết lập các biến về kiểu chữ, màu sắc chữ, cỡ chữ cho toàn bộ blog; màu sắc link khi bình thường và khi rê chuột qua.

Mở template của bạn lên, tìm đến đoạn:

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style
Name: Deluxe Blog Tips
Designer: Riwlis
URL: www.deluxeblogtips.com
----------------------------------------------- */

Nếu blog của bạn không có các thông tin về tác giả và template, thì nó chỉ có:

<b:skin><![CDATA[

Chúng ta chèn ngay phía sau đoạn đó các khai báo biến như sau:

/* Variable definitions
   ====================
<Group description="Page Text" selector=".content-inner">
  <Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif;"/>
  <Variable name="body.text.color" description="Text Color" type="color" default="#1e1e1e" value="#1e1e1e"/>
</Group>

<Group description="Links" selector=".main-outer">
  <Variable name="link.color" description="Link Color" type="color" default="#c20c0c" value="#c20c0c"/>
  <Variable name="link.hover.color" description="Hover Color" type="color" default="#1e1e1e" value="#1e1e1e"/>
</Group>
*/

Mỗi 1 biến được đặt trong 1 thẻ Variable, gồm có các thuộc tính:

• name: tên của biến (cần nhớ để lát nữa dùng)
• description: mô tả của biến
• type: loại giá trị, ở trên có 2 loại giá trị được dùng là font và color
• default: giá trị mặc định, được dùng khi không chỉnh sửa gì
• value: giá trị thực tế, là giá trị mà người dùng thay đổi cho phù hợp

Các biến được nhóm vào thành các nhóm nhỏ (ở trên có 2 nhóm) nhờ thẻ Group.

Để 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 mà thôi, VD như sau:

body {
  color: $(body.text.color);
  font: $(body.font);
}
a {
  border-bottom: 1px solid #ccc;
  color: $(link.color);
  text-decoration: none;
}
a:hover {
  border-bottom: 1px solid #333;
  color: $(link.hover.color);
}

Biến được tham chiếu có dạng $(tên_biến), khi đó, giá trị thực của nó (trong thuộc tínhvalue đã nói ở trên) sẽ được "copy and paste" vào vị trí mà nó được tham chiếu.

Khi bạn cần chỉnh sửa giá trị của biến, thay vì phải download template rồi sửa và upload ngược lại, bạn chỉ cần vào phần Design > Template Designer > Advanced, bạn sẽ thấy danh sách các biến và giá trị của chúng ở đó, như hình dưới:

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.

Việc sử dụng biến này ngoài ưu điểm giúp bạn đỡ tốn công sửa template, nó còn giúp bạn sử dụng 1 biến cho nhiều mục đích, VD bạn khai báo 1 biến có kiểu font là Times, bạn có thể dùng nó cho tiêu đề blog, tiêu đề bài viết, dòng copyright, ... mà không mất công phải "copy and paste" nhiều lần, và khi sửa thì sửa 1 lần cho tất cả. Rất dễ dàng phải không?

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. VnTim^TM Theo Nguồn hontap blog