Đôi khi font chữ, kích cỡ và màu sắc template của bạn không làm bạn hài lòng. Bạn muốn thay đổi nó cho đẹp hơn, cá tính hơn, mang phông cách riêng... Bạn có thể tham khảo bài viết dưới đây. Nếu bạn đang tìm kiếm Font chữ miễn phí, đẹp để thiết kế nội dung cho blog của bạn thì Google Font với trên 600 font chữ là một lựa chọn tốt nhất cho bạn.
Making the Web Beautiful!(Rock Salt)
Making the Web Beautiful!(Tangerine)
Making the Web Beautiful!(Ubuntu Mono)
Making the Web Beautiful!(Dancing Script)
Bước 3: Đăng nhập vào Blogger, vào Template và click Edit HTML
Bước 4: Tìm thẻ <head> và thêm đoạn mã sao chép ở phía trên vào dưới thẻ , nhưng ở đây bạn phải có thêm một dấu gạch chéo ( / ) như dưới đây:
<link href="http://fonts.googleapis.com/css?family=Dancing+Script:700,400" rel="stylesheet" type="text/css" />
Nếu bạn không thêm dấu gạch chéo / thì khi Save Template nó sẽ bào lỗi Error parsing XML (Lỗi cú pháp).
Bước 5: Bây giờ bạn có để định dạng lại font chữ của mình bằng CSS và thêm nó vào template của bạn ngay phía trước ]]></b:skin> Ví dụ, nếu bạn muốn hiển thị font chữ cho toàn bộ trang thì thêm:
Bây giờ giả sử bạn muốn tích hợp font chữ cho tiêu đề bài viết của bạn:
Hoặc giả sử bạn muốn nó hiển thị cho Blockquotes thì thêm:
...Để có thể thêm nhiều hiệu ứng cho font chữ, bạn có thể tham khảo qua Google Font Developer
Bước 6: Save Template
- Nếu tên font có khoảng trắng thì bạn thay khoảng trắng này bằng ký tự + Ví dụ: Dancing+Script
- Bạn cũng có thể yêu cầu nhiều font chữ cùng một lúc và bạn sẽ ngăn cách các font này bằng ký tự |
Ví dụ, mình yêu cầu 4 font chữ Rock Salt, Tangerine, Ubuntu Mono và Dancing Script thì stylesheet link của mình sẽ là:
<link href="http://fonts.googleapis.com/css?family=Merienda|Rock+Salt|Tangerine|Ubuntu+Mono|Dancing Script" rel="stylesheet" type="text/css" />
Blogger sử dụng font của Google trong một thời gian khá dài, bạn có thể dễ dàng tìm thấy nó bằng cách nhấn vào Customize trong Template của bạn.
Nhưng ở đó không có nhiều font có sẵn để bạn lựa chọn phải không nào? Bạn có thể vào thư viện Google Font để lựa chọn cho mình những font thích hợp để đưa nó vào blog của bạn, bạn có thể tùy chỉnh font chữ cho Blog của bạn bằng một trong rất nhiều font chữ ở đó.
Một số Font chữ của Google:
Making the Web Beautiful!(Rock Salt)
Making the Web Beautiful!(Tangerine)
Making the Web Beautiful!(Ubuntu Mono)
Making the Web Beautiful!(Dancing Script)
Chèn vào Blogspot
Bước 1: Vào Google Font lựa chọn cho mình 1 font ưng ý. Sau đó bấm vào Quick - use
Giả sử ở đây tôi chọn font Dancing Script
Bước 2: Sau bấm vào Quick - use bạn sẽ được chuyễn đến trang tiếp theo, nơi bạn có thể lựa chọn các tùy chọn cho font chữ của mình
- Chọn kiểu bạn muốn hiển thị. Ở đây đối với font Dancing Script có 2 lựa chọn
- Chọn bộ ký tự bạn muốn hiển thị.
- Sau khi thiết lập nó sẽ tạo ra cho ta được 1 đoạn code, Ví dụ ở đây là:
Bước 4: Tìm thẻ <head> và thêm đoạn mã sao chép ở phía trên vào dưới thẻ , nhưng ở đây bạn phải có thêm một dấu gạch chéo ( / ) như dưới đây:
<link href="http://fonts.googleapis.com/css?family=Dancing+Script:700,400" rel="stylesheet" type="text/css" />
Nếu bạn không thêm dấu gạch chéo / thì khi Save Template nó sẽ bào lỗi Error parsing XML (Lỗi cú pháp).
Bước 5: Bây giờ bạn có để định dạng lại font chữ của mình bằng CSS và thêm nó vào template của bạn ngay phía trước ]]></b:skin> Ví dụ, nếu bạn muốn hiển thị font chữ cho toàn bộ trang thì thêm:
body {
font-family: 'Merienda', sans-serif;
}Bây giờ giả sử bạn muốn tích hợp font chữ cho tiêu đề bài viết của bạn:
h3.post-title {
font-family: 'Merienda', sans-serif;
}Hoặc giả sử bạn muốn nó hiển thị cho Blockquotes thì thêm:
.post blockquote {
font-family: 'Merienda', sans-serif;
}...Để có thể thêm nhiều hiệu ứng cho font chữ, bạn có thể tham khảo qua Google Font Developer
Bước 6: Save Template
Ngoài ra:
- Bạn cũng có thể thêm nhiều font chữ khác nhau tại các vị trí muốn hiển thị bằng cách thực hiện tương tự như các bước phía trên và thêm các thuộc tính CSS tương ứng.- Nếu tên font có khoảng trắng thì bạn thay khoảng trắng này bằng ký tự + Ví dụ: Dancing+Script
- Bạn cũng có thể yêu cầu nhiều font chữ cùng một lúc và bạn sẽ ngăn cách các font này bằng ký tự |
Ví dụ, mình yêu cầu 4 font chữ Rock Salt, Tangerine, Ubuntu Mono và Dancing Script thì stylesheet link của mình sẽ là:
<link href="http://fonts.googleapis.com/css?family=Merienda|Rock+Salt|Tangerine|Ubuntu+Mono|Dancing Script" rel="stylesheet" type="text/css" />
Tham khảo thêm tại:
Trong bài viết này mình đã hướng dẫn các bạn làm thế nào để thêm Google Font vào Blogspot, công việc này sẽ thật sự dễ dàng nếu bạn có 1 chút kiến thức về CSS. Mình mong rằng nó sẽ giúp bạn hiển thị các font chữ đẹp trên blog của bạn.
hi bạn
ReplyDeletecảm ơn bạn nhờ bạn hướng dẫn mà mình đã làm được
nhưng có điều mình thấy hình như nó không có đổi toàn bộ
nhưng harrykhang.com của mình có phần đổi có phần vẫn là arial mặc định :((
Font mình muốn đổi sang là Merriweather á
Mình dùng cái cách đầu tiên bạn chỉ body... để hiển thị font mới cho toàn bộ web mà không được bạn ạ
Những chổ không hiển thị là do nó đả được định dạng bởi một font khác. Vào Edit Template sửa lại các thẻ muốn hiển thị font Merriweather là được.
DeleteVí dụ: Muốn tất cả tiêu đề là font Merriweather
h3.post-title {
...
font-family: 'Merienda', sans-serif;
...
}
hi anh
ReplyDeletecảm ơn anh đã chia sẻ 1 thủ thuật hay với mọi người
anh cho em hỏi là có thể chỉ thị font cho tiêu đề trang không anh?
Dựa vào cấu trúc HTML của bạn mà thay đổi font nhé.
DeleteVí dụ: thay đổi font cho tiêu trang đề thường là:
#header h1.title,#header p.title{
......
font-family: 'tên font', sans-serif;
.....
}
Qúa hay. Cám ơn nhé bác.
ReplyDeleteBạn có nhiều thủ thuật blogspot cực hay luông! :)
ReplyDeleteCác bạn cho mình hỏi mình có xin được code template mình thích, mình đã thay cho blogger của mình nhưng mình không biết làm thế nào để thay đổi nội dung ví dụ như thêm bài viết, thay đổi thư mục....các bạn giúp mình với, cám ơn các bạn.
ReplyDelete