A1K44 Belong you

[KiNg]_[PiN]-BB · 1 Tùy biến tiện ích đám mây nhãn 18/01/12, 10:17 pm

Hẳn bạn biết rằng Blogger có một tiện ích gọi là Label Cloud, chính
là tiện ích đám mây nhãn khá quen thuộc. Trên sidebar của Thủ thuật
Bloggger bạn sẽ thấy một tiện ích như vậy. Tuy nhiên để có style đẹp thì
bạn cần phải tùy biến cho tiện ích này.

Thủ thuật sau đây sẽ giúp bạn tùy biến về mầu sắc cho các tag và thêm
thuộc tính title hiển thị số bài viết trong nhãn, thay cho cho tính năng
mặc định hiển thị số bài viết bên cạnh label.

Trước khi cài đặt bạn hãy xem hình minh họa bên dưới.

Bước 1. Đăng nhập Blogger, vào Design >> Page
Elements. Nếu blogspot của bạn chưa có tiện ích Nhãn thì thêm một tiện
ích như vậy trên phần sidebar. Lưu ý cho tiện ích hiển thị dưới dạng
Cloud và chọn Show number of posts per label.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates. Đặt đoạn code CSS sau đây vào trước thẻ ]]></b:skin>.

/* Label Cloud */

.cloud-label-widget-content {

text-align:center;

font-weight: bold;

}

.cloud-label-widget-content span {

padding: 0 0 0 5px;

}

.label-size-1 a {color: #8b8989; font-size: 11px;}

.label-size-2 a {color: #000000; font-size: 13px;}

.label-size-3 a {color: #ac58fa; font-size: 15px;}

.label-size-4 a {color: #dccdc; font-size: 16px;}

.label-size-5 a {color: #0101df; font-size: 19px;}

Bước 3. Tìm đến đoạn code như bên dưới.

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



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

<data:label.name/>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href=label.url'><data:label.name/></a>

</b:if>

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

(<data:label.count/>)

</b:if>



</b:loop>

Thay phần code được đánh dấu màu đỏ bằng đoạn code

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

<data:label.name/>

<b:else/>

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

<a expr:dir='data:blog.languageDirection' expr:href=label.url' 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=label.url'><data:label.name/></a>

</b:if>

</b:if>

Lưu Template là OK.

1 Tùy biến tiện ích đám mây nhãn 18/01/12, 10:17 pm

[KiNg]_[PiN]-BB