Popular Labels

Trong widget Label thì việc hiển thị nhãn theo tần suất vốn có sẵn. Thủ thuật này sẽ giới hạn số lượng nhãn được đưa ra và gọi với cái tên Popular Labels, có nghĩa chỉ một vài nhãn có nhiều bài viết nhất được hiển thị trên widget. Trước khi bắt tay thực hiện hãy chắc chắn bạn đã có widget Label trên blog.



Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

Bước 2: Tìm trong template đoạn mã dưới đây:

<b:loop values='data:labels' var='label'>
  <li>
    <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 dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

Thay thế thành:

<b:loop index='i' values='data:labels' var='label'>
  <b:if cond='data:i &lt; 5'>
    <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
  </b:if>
</b:loop>

Bước 3: Quay trở lại Bố cục và chọn Chỉnh sửa widget Label. Tích chọn các thông số như hình dưới:

Thay 5 bằng số nhãn bạn muốn hiển thị.