FONT CHỮ
Như đã biết, một vài Template của Blogger không hiển thị đúng tiếng Việt của chúng ta. Vậy thì làm thế nào để khắc phục? Bạn có thể đọc bài viết trước đây để khắc phục. 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ị;
Chúc bạn chỉnh sửa thành công.
her her! bài vít sai kìa bạn. #000000 là màu đen ko fải màu trắng đâu.
ReplyDelete@anonymous, cám ơn. Tôi đã cập nhật lại. Nhiều khi đánh chữ mà không kiểm tra lại nên sai là ... chuyện thường.
ReplyDeletecái này hay quá. mình đang cần mấy cái này để làm font blog đẹp hơn này. Mà liệu có thể thêm những font chữ đẹp đẹp như font cheri , copleted in him dc ko :D
ReplyDeleteMình đã xem blog của bạn nhiều lần, đã chỉnh sữa template nhưng từ khi chuyển sang tên miền tùy chỉnh thì site không hiển thị tốt trong IE, banner và nút link bi mất. trong khi trước đó (chưa đỗi tên miền) nó vẫn OK trong cả 2 trình duyệt.Giờ không biết giải quyết sao nũa. site www.hocpsd.com/
ReplyDeleteminh da tham khao cac bai viet cua ban.nhung no chi van dung cho cac mau blogger co san..ko the van dung neu nhu ta thay doi giao dien khac
ReplyDeletemình có 1 đoạn css thế này . admin có thể tối ưu cho mình được không vì nó làm cho trình duyệt tải chậm hơn
ReplyDelete* html button.button2,* html input.button2{padding-bottom:0;margin-bottom:1px;height:24px;padding-right:3px;padding-left:3px}*+html button.button2,*+html input.button2{height:24px;padding-right:3px;padding-left:3px}*+html button.button2 img{vertical-align:middle}* html button.button2 img{vertical-align:middle}button.bbcode{border:1px solid #e3adad
email mình là majquang@gmail.com
Bài viết khá hay
ReplyDelete