Chúc bạn một ngày tốt lành

Thứ Năm, ngày 11 tháng 11 năm 2010

Đặ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.
 VnTimTM Theo Nguồn hontap blog

1 Comment:

Nguyễn Huy said...

Thiet bi dinh vi có các đặc điểm kỹ thuật: lưu trữ và truyền số liệu qua mạng internet (thông tin về xe và lái xe; hành trình của xe; tốc độ vận hành của xe; số lần và thời gian dừng, đỗ xe; số lần và thời gian đóng, mở cửa xe; thời gian làm việc của lái xe); xuất dữ liệu ra máy in (biển số xe, thông tin về giấy phép lái xe; tốc độ tức thời của xe tại mười thời điểm bất kỳ trong suốt hành trình xe chạy; số lần xe chạy vượt quá tốc độ giới hạn và duy trì liên tục 30 giây trong suốt hành trình xe chạy; số lần đóng, mở cửa xe trong suốt hành trình xe chạy)…

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam