Trên blog của bạn đôi khi bạn muốn in hoa một số tiêu đề để nhìn nó đẹp hơn, ví dụ như tiêu đề blog, tiêu đề bài viết, tiêu đề của tiện ích ... và in hoa bất cứ nội dung nào bạn muốn. Bạn hoàn toàn có thể nhập tiêu đề bằng chữ in hoa nhưng như vậy rất mất thời gian, mình sẽ giúp các bạn in hoa tự động các tiêu đề - nghĩa là bạn nhập văn bản thông thường rồi dùng CSS để in hoa nó, sau này bạn không thích thì bỏ CSS đi và tiêu đề trở về bình thường.
#Xác định vùng chọn
Đây là bước quan trọng nhất của thủ thuật này, phải xác định thật đúng vùng chọn của tiêu đề bạn muốn in hoa thì mới được. Sau đây là cách xác định:
1. Mở blog của bạn lên
2. Di chuyển con trỏ chuột vào tiêu đề bạn muốn in hoa
3. Click chuột phải chọn Kiểm tra phần tử
 |
| Tiêu đề của bài viết |
4. Một cửa sổ của tiện hiện ra, bạn hãy copy vùng chọn để áp dụng css (xem hình dưới)
Dưới đây là một vài vùng chọn mình đã xác định được, nó đúng với hầu hết template:
 |
| Vùng chọn của tiêu đề bài viết trên blog này là h3.post-title a |
- Tiêu đề blog .Header h1 hoặc .Header h2
- Tiêu đề bài viết h3.post-title a hoặc h2.post-title a đôi khi là h1.post-title a
- Tiêu đề của các tiện ích ở sidebar là .sidebar h2
- Tiêu đề của các tiện ích ở footer là #footer-wrapper h2
- ...
#Thêm CSS
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán vùng chọn lên trên (trước) thẻ mà bạn vừa tìm
5. Thêm code {text-transform: uppercase;} vào sau vùng chọn mà bạn mới dán vào
6. Lưu lại
Ví dụ: Bạn muốn in hoa tiêu đề bài viết trên blog, thì bạn chèn vùng chọn h3.post-title a vào trước (trên) thẻ ]]></b:skin>, sau đó chèn {text-transform: uppercase;} vào sau vùng chọn mới dán vào là .Header h1. Như vậy, ngắn gọn là bạn sẽ chèn h3.post-title a {text-transform: uppercase;} vào trước thẻ ]]></b:skin>. Xem hình minh họa dưới sẽ rõ hơn.
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán vùng chọn lên trên (trước) thẻ mà bạn vừa tìm
5. Thêm code {text-transform: uppercase;} vào sau vùng chọn mà bạn mới dán vào
6. Lưu lại
Ví dụ: Bạn muốn in hoa tiêu đề bài viết trên blog, thì bạn chèn vùng chọn h3.post-title a vào trước (trên) thẻ ]]></b:skin>, sau đó chèn {text-transform: uppercase;} vào sau vùng chọn mới dán vào là .Header h1. Như vậy, ngắn gọn là bạn sẽ chèn h3.post-title a {text-transform: uppercase;} vào trước thẻ ]]></b:skin>. Xem hình minh họa dưới sẽ rõ hơn.
Đây là kết quả sau khi thêm CSS, tất cả các tiêu đề bài viết trên blog đều đã được tự động in hoa hết.
Nếu bạn có thắc mắc hay cần giúp đỡ gì thì hãy để lại bình luận dưới bài viết.
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.