• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tùy biến tiện ích đám mây nhãn

13
24/03/2011

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'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</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'>
<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' expr:title='data:label.count + &quot; bài viết trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

Lưu Template là OK.

{13 bình luậnAdd yours ?}

18:45:00, 24 thg 3, 2011

Bác Hà và bác Duy rành blogger tag ác thật. Bài này phải tìm hiểu nhiều mới biết đây.

Mừng bác Hà đã hoàn thành đại cải cách. Bloggerism đã thành hình rồi.

Reply
19:44:00, 24 thg 3, 2011

Thank you my friend. Đúng là tùy biến tiện ích Tag Cloud kiểu này rất gọn nhẹ, thay vì phải dùng javascript để có những tính năng tương tự :67)

Reply
23:36:00, 24 thg 3, 2011

- Mình ngại nhất là thay thế mã :) chèn thêm thì không ảnh hưởng gì đến hòa bình và lịch sử thế giới.

Reply
23:48:00, 24 thg 3, 2011

chèn thêm thì nó nặng blog hơn rất là nhiều. tiện ích hay. :51)

Reply
18:52:00, 28 thg 3, 2011

Style khác đấy chứ e, cái chính bài này là style, còn cái title thì tham khảo thôi.

Reply
19:03:00, 28 thg 3, 2011

Thực ra cái title k có gì cao siêu cả, nhiều bạn vẫn thích để nguyên số đếm bài viết trong nhãn, còn cái CSS nhiều bạn vẫn chưa biết cách tùy biến màu.

Reply
11:16:00, 12 thg 4, 2011

Trang của tớ (tracuuphapluat.info) đã áp dụng thành công thủ thuật này nhưng không hiểu sao, các nhãn chỉ có một màu xanh, không hiển thị các màu sắc khác. Mong bạn giúp đỡ...

Reply
14:52:00, 12 thg 4, 2011

Không đổi màu lý do là Template của cậu có nhiều tiện ích nhãn quớ, cậu phải gán CSS cho id của nhãn cần đổi màu nha. Đối với cậu thì CSS dùng như zầy nè:

/* Label Cloud */
#Label13 .cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
#Label13 .cloud-label-widget-content span {
padding: 0 0 0 5px;
}
#Label13 .label-size-1 a {color: #8b8989; font-size: 11px;}
#Label13 .label-size-2 a {color: #000000; font-size: 13px;}
#Label13 .label-size-3 a {color: #ac58fa; font-size: 15px;}
#Label13 .label-size-4 a {color: #dccdc; font-size: 16px;}
#Label13 .label-size-5 a {color: #0101df; font-size: 19px;}

Làm thử đi nhé, hông được qua đây quánh tớ nhé

Reply
11:04:00, 13 thg 4, 2011

He he cảm ơn cậu nhiều lắm, làm xong rồi. Label3 chứ không phải Label13. :55)

Reply
18:10:00, 1 thg 11, 2011

Bác Hà giờ nếu mình muốn tất cả các nhãn đều có cùng 1 định dạng css hết thì phải làm như thế nào?

Reply
22:08:00, 1 thg 11, 2011

@Minh Triết Thế thì tạo chung thuộc tính CSS cho tất cả các lớp như thế này:
.label-size-1 a,.label-size-2 a,.label-size-3 a,.label-size-4 a,.label-size-5 a {color: #dccdc; font-size: 16px}

Reply
22:14:00, 1 thg 11, 2011

@Huỳnh Nhật HàTks bác có giải pháp rồi. em để dạng list rồi làm class chung cho ul li là xong.

Reply
10:12:00, 21 thg 12, 2011

Đã áp dụng. Thank Hà nhiều.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn