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

Posted on Thứ Bảy, 4 thg 4 2020 By Cốp Pha Việt

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.

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

Để đặ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>

<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