• 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

Đị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

6
27/10/2011

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.

{6 bình luậnAdd yours ?}

Yolks
AUTHOR
20:40:00, 27 thg 10, 2011

:3) đẹp mà a hà ơi , đừng có xóa nhé , em ko có thời gian viết bài , a cứ để đó , em có bài mới sẽ vô viết

Reply
16:19:00, 28 thg 10, 2011

Hay lắm
Cảm ơn anh nhiều :3)

Reply
19:15:00, 28 thg 10, 2011

Ko thấy có nút +1 để cộng nhỉ :(

Reply
19:18:00, 28 thg 10, 2011

@NAD a NAD nhắc mới nhớ nha. Lúc trước có mà một dạo đã remove rồi. Chắc phải gắn lại thôi.

Reply
00:52:00, 25 thg 12, 2011

Tìm thẻ đóng 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ó, Mọi người ơi mình không hiểu đoạn viết này lắm, có ai giúp mình zới.

Reply
18:47:00, 21 thg 9, 2016

ôi, cũng đơn giản nhỉ

suc khoe

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