Chèn icon vào trước nhãn trong tiện ích Label

Tiện ích Label là một tiện ích rất đỗi cần thiết cho một blogspot, nó giúp người đọc dễ dàng tìm đến một chuyên mục riêng biệt nào đó. Ngoài cách tùy biến tiện ích đám mây nhãn, chúng ta có thể tùy biến thêm cho nó bằng cách chèn icon hoặc hình ảnh vào trước hoặc sau tên nhãn trong tiện ích Label. Bạn có thể xem demo trong nhãn Emoticons ở sidebar của trang này.

Để thực hiện điều này bạn phải có một số icon riêng biệt cho một số nhãn bạn cần áp dụng thủ thuật, upload các icon lên web rồi lấy URL để áp dụng.

Thủ thuật này chỉ dùng đến CSS nên rất đơn giản, trước tiên cần biết quy tắc chung cho code.

Dưới đây là định dạng CSS chung:

a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 25px;background: url(URL_icon_nhãn 1) no-repeat center left;}
a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Trong định dạng CSS ở trên, a chỉ định liên kết, a:hover để tạo hiệu ứng khi rê trỏ qua liên kết, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, thay Tên nhãn 1 bằng tên nhãn cần chèn icon, thay XXXXXX và YYYYYY bằng mã màu bạn chọn, bạn có thể chỉnh font-size theo ý muốn, thay URL_icon_nhãn 1 lả địa chỉ icon đã upload lên web. Theo định dạng như trên, bạn có thể tạo thêm cho các nhãn khác.

Định dạng ở trên áp dụng cho trường hợp chèn icon ở bên trái nhãn, nếu muốn chèn icon bên phải nhãn thì đổi padding-left thành padding-right và đổi center left thành center right.

Hãy chắn chắn trong blogspot của bạn đã có tiện ích Nhãn, nếu chưa có thì có thể thêm vào. Bạn hãy đặt toàn bộ code CSS được áp dụng vào Template ở trước dòng ]]></b:skin>.

Lưu ý: Code ở trên sẽ khiến cho tất cả các liên kết nhãn được áp dụng đều có icon được chèn, nếu bạn giới hạn cho một tiện ích nhãn thì lấy id của tiện ích nhãn (thường có tên là Label1) để gán vào CSS như bên dưới.

#Label1 a[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#XXXXXX;font-size:25px;padding-left: 20px;background: url(URL_icon_nhãn 1) no-repeat center left;}
#Label1 a:hover[href $='http://huynh-nhat-ha.blogspot.com/search/label/Tên nhãn 1']{color:#YYYYYY;font-size:25px;}

Hy vọng thủ thuật "độc" này sẽ giúp ích nhiều cho blogspot của bạn. :44)