Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB





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 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)

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Forumotion.com | © PunBB | Free forum support | Liên hệ | Report an abuse | Sosblogs
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải