Tùy chỉnh HTML trong blogger

FONT CHỮ

Tuy nhiên hôm nay chúng ta sẽ làm theo một cách khác: Sửa trực tiếp từ Edit HTML (Chỉnh sửa HTML). Đăng nhập Blogger.com, vào Template (Mẫu), chọn Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và bạn quan sát dòng (Ở đây là ví dụ):
<variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Verdana, sans-serif">
<variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial, sans-serif">

<variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Verdana, sans-serif">

<variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Arial, sans-serif">

<variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Verdana, sans-serif">

Trong đó:

bodyfont: Font bài đăng

headerfont: Font tiêu đề

pagetitlefont: Font tên blog

descriptionfont: Font miêu tả blog

postfooterfont: Font footer

default là giá trị mặc định được người thiết kế Template chọn, value là giá trị hiện thời mà blog bạn sử dụng. Để hiển thị được tiếng Việt có dấu bạn phải dùng một trong các font này: Verdana, Times, Arial. Trong ví dụ trên, giá trị mặc định của headerfont: normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif lần lượt là font-style, font-weight, font-size, font-family. Đây là dạng viết tắt của các thuộc tính font trong CSS.

Tên của biến này được dùng ở nhiều vị trí nên người ta đã định nghĩa nó ở phía trên và sử dụng dùng cho một thành phần nào đó phía dưới, dấu $ được thêm vào trước tên biến phía trước chẳng hạn #header h1{ font: $pagetitlefont;}. Tương tự như vậy bạn thấy $descriptionfont, $postfooterfont,..

MÀU CHỮ
Giống như font chữ, thuộc tính màu chữ cũng được tạo bằng các biến. Bạn có thể dùng trang web hay link này hoặc chọn từ đây để lấy mã màu cho blog của mình.bgcolor: Màu nền

textcolor: Màu chữ

linkcolor: Màu link

pagetitlecolor: Màu tên blog

descriptioncolor: Màu miêu tả blog

titlecolor: Màu tiêu đề bài đăng

bordercolor: Màu đường viềng

sidebarcolor: Màu tiêu đề trên sidebar

sidebartextcolor: Màu chữ trên sidebar

visitedlinkcolor: Màu link đã đọc

Cú pháp

color: #sáu_ký_tự;

Ví dụ: Màu trắng

color:#ffffff;

KÍCH THƯỚC CHỮ
font-size: từ_khóa;
Các từ khóa xx-small, x-small, small, medium, large, x-large, và xx-large lần lượt cho kích thước từ nhỏ đến lớn. Ví dụ: font-size: medium;

Ở đây người tạo Template đã dùng %. Ví dụ: font-size: 200%;

NÉT CHỮ

font-weight: từ_khóa;

Các số từ 100 -> 900 thể hiện nét chữ nhạc nhất đến đậm nhất. Ngoài ra bạn có thể dùng các từ khóa: normal (400), bold (700), bolder (900) và lighter (100). Ví dụ: font-weight: bolder;

KIỂU CHỮ

font-style: từ_khóa;
Các từ khóa normal, italic lần lượt cho các kiểu chữ bình thường (mặc định), nghiêng,

VỊ TRÍ CHỮ

text-align: từ_khóa;

Các từ khóa left, right, center, justify lần lượt dùng để canh vị trí trái phải, giữa hoặc đều cả hai bên cho chữ hoặc văn bản.

TRANG TRÍ TEXT

text-decoration: từ_khóa;
Các từ khóa none, underline, overline, line-through lần lượt dùng để xóa thuộc tính gạch dưới cho liên kết, gạch dưới, gạch trên đầu, và gạch ngang qua text.

CHUYỂN DẠNG CHỮ

text-transform: từ_khóa;
Các từ khóa capitalize, uppercase, lowercase, hoặc none lần lượt chuyển văn bản sang viết hoa ký tự đầu, viết hoa, viết thường hoặc bình thường. Ví dụ: Tại header (với các template có header) bạn sẽ thấy: text-transform: uppercase;

KHOẢNG CÁCH GIỮA CÁC DÒNG

(Trong MS Word là line spacing)

line-height: giá_trị;
Giá trị là số, chiều dài hoặc %. Ví dụ: ….

KHOẢNG CÁCH GIỮA CÁC TỪ

(Ví dụ: Hello là một từ)

word-spacing: giá_trị;
Tải về và tùy chỉnh  Mẫu template 3cot