Định dạng CSS riêng cho các tag có số bài viết nhiều hơn một số nhất định

Tiện ích đám mây nhãn (Tag Cloud) rất cần thiết cho blogspot, giúp người dùng dễ dàng tìm kiếm bài viết theo từng chuyên mục. Trước đây mình đã từng hướng dẫn tùy biến màu sắc cho các tag trên tiện ích này. Hôm nay mình sẽ hướng dẫn bạn cách định dạng CSS riêng cho các tag có số bài viết nhiều hơn một con số nhất định nào đó. Bạn có thể xem demo ở tiện ích Tag Cloud trên Thủ thuật Blogger. Ở đây mình định dạng cho các tag có số bài viết lớn hơn số 10.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích Tag Cloud này gần với nó, rồi đặt sau thẻ </b:widget> đã tìm bằng đoạn code bên dưới:

1. <b:widget id='Label100' locked='false' title='Tag Cloud' type='Label'>
2. <b:includable id='main'>
3.   <b:if cond='data:title'>
4.     <h2><data:title/></h2>
5.   </b:if>
6.   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
7.       <b:loop values='data:labels' var='label'>
8.         <b:if cond='data:label.count &gt; 10'>
9.  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
10.           <b:if cond='data:blog.url == data:label.url'>
11. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
12. <b:else/>
13. <style>
14. a#more10post_label {background:#777;padding: 0 3px 0 3px}
15. </style>
16. <b:if cond='data:showFreqNumbers'>
17. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name' id='more10post_label'><data:label.name/></a>
18. <b:else/>
19. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
20. </b:if>
21. </b:if>
22.         </span>
23.   <b:else/>
24. <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
25.           <b:if cond='data:blog.url == data:label.url'>
26. <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
27. <b:else/>
28. <b:if cond='data:showFreqNumbers'>
29. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name'><data:label.name/></a>
30. <b:else/>
31. <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a>
32. </b:if>
33. </b:if>
34.         </span>
35. </b:if>
36.  </b:loop>
37.      </div>
38. </b:includable>
39. </b:widget>

Ở đây mình gán id='more10post_label' để chuyên biệt hóa liên kết của các tag có số bài viết lơn hơn 10. Từ đó bạn có thể thêm thuộc tính CSS (ở dòng code số 14) để tạo bản sắc cho tiện ích.

Lưu Template.

Bước 2. Vào Page Elements. Chỉnh sửa tiện ích Tag Cloud, cho tiện ích hiển thị dưới dạng Cloud và chọn Show number of posts per label theo như hình minh họa bên dưới.

Về phần CSS, bạn có thể tham khảo thêm ở bài viết Tùy biến tiện ích đám mây nhãn.