A1K44 Belong you

[KiNg]_[PiN]-BB

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:

<b:widget id='Label100' locked='false' title='Tag Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

<b:loop values='data:labels' var='label'>

<b:if cond='data:label.count > 10'>

<span expr:class='"label-size label-size-" + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<style>

a#more10post_label {background:#777;padding: 0 3px 0 3px}

</style>

<b:if cond='data:showFreqNumbers'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"' expr:title='data:label.count + " bài viết trong nhãn " + data:label.name' id='more10post_label'><data:label.name/></a>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>

</b:if>

</b:if>

</span>

<b:else/>

<span expr:class='"label-size label-size-" + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<b:if cond='data:showFreqNumbers'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"' expr:title='data:label.count + " bài viết trong nhãn " + data:label.name'><data:label.name/></a>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=10"'><data:label.name/></a>

</b:if>

</b:if>

</span>

</b:if>

</b:loop>

</div>

</b:includable>

</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.

1 Đị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 18/01/12, 10:22 pm

[KiNg]_[PiN]-BB