Cách đặt điều kiện css, js cho các loại tiện ích blogspot

Danh sách tổng hợp các loại tiện ích widget mặc định trong Blogger và hướng dẫn đặt css, js trong điều kiện của các loại tiện ích blogspot

Blogger có tất cả 25 tiện ích cộng với tiện ích Bài đăng trên Blog cộng với tiện ích Adsense tất cả 27 tiện ích điều mà ai cũng biết vì nó hiển thị con số mỗi khi bạn thêm tiện ích thế nhưng có thể bạn chưa biết hết về loại tiện ích của nó, tên của tiện ích thì bạn biết rồi đó còn loại chưa chắc bạn đã biết đủ 25 loại của mỗi tiện ích khác nhau.

Cách đặt điều kiện css, js cho các loại tiện ích blogspot
Blogger có tổng cộng 25 loại tiện ích widget

Nhắc đến loại tức là widget được gán vào để phân biệt là nó chứ không phải loại tiện ích khác, trong thẻ <b:widget>, nó được gán bằng thuộc tính type='loại tiện ích', mình liệt kê danh sách của 25 loại tiện ích dưới đây để các bạn tham khảo

ICON TYPE TÊN HIỂN THỊ
AdSense AdSense AdSense
Attribution Thuộc tính
Blog Bài đăng trên Blog
BlogArchive BlogArchive Lưu trữ Blog
BloggerButton BloggerButton Logo
BlogList BlogList Danh sách Blog
BlogSearch BlogSearch Tìm kiếm blog
ContactForm Biểu mẫu liên hệ
FeaturedPost FeaturedPost Bài đăng nổi bật
Feed Feed Nguồn cấp
FollowByEmail FollowByEmail Theo dõi qua Email
Followes Followes Người theo dõi
Header Header Tiêu đề Trang
HTML HTML HTML/JavaScript
Image Image Hình ảnh
Label Label Nhãn
LinkList LinkList Dannh sách Liên kết
PageList PageList Trang
PopularPosts PopularPosts Bài đăng phổ biến
Profile Profile Hồ sơ
ReportAbuse ReportAbuse Báo cáo Lạm dụng
Stats Thống kê blog
Subscribe Subscribe Liên kết Đăng ký
Text Text Văn bản
TextList TextList Danh sách
Translate Translate Dịch
Wikipedia Wikipedia Wikipedia

Vì sao bạn nên đặt css, js trong điều kiện của các loại tiện ích blogspot?

Nó liên quan đến tối ưu pagespeed và kích thước trang, cụ thể khi bạn đặt css, js trong điều kiện của các loại tiện ích khi bạn thêm mới tiện ích thì css hay js của tiện ích mà bạn thêm mới được tải, nếu bạn không thêm css, js sẽ không hiển thị.

Tham khảo thêm: Làm thế nào để tối ưu css trong blogspot?

Để đặt điều kiện css, js cho mỗi loại tiện ích, các bạn đặt như sau:

<b:if cond='data:widgets.[type]'>
  // Đặt css, js cho tiện ích
</b:if>

Với type bằng với một trong các loại liện ích sau:

["AdSense","Attribution","Blog","BlogArchive","BloggerButton","BlogList","BlogSearch","ContactForm","FeaturedPost","Feed","FollowByEmail","Header","HTML","Image","Label","LinkList","PageList","PopularPosts","Profile","ReportAbuse","Stats","Subscribe","Text","TextList","Translate","Wikipedia"]

Một số ví dụ

<b:if cond='data:widgets.Stats'>
<b:tag name='style'>
/* <![CDATA[ */
  // Viết css cho widget thống kê blog
/* ]]> */</b:tag>
</b:if>

Tham khảo thêm: Cách sử dụng thẻ b:tag trong blogspot

<b:if cond='data:widgets.Feed'>
<script>//<![CDATA[
  // Viết JavaScript cho widget nguồn cấp
//]]></script>
</b:if>

Ngoài ra với widget bài đăng trên Blog, bạn có thêm các tùy chọn ở rộng, xem bài viết các điều kiện hiển thị dữ liệu trong tùy chọn trang bài viết của widget Blog version 2


Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!