Tùy biến widget label (nhãn) Blogger toàn tập

Label (nhãn) là widget do Blogger cung cấp, dùng để liệt kê những nhãn có trong Blog và số bài đăng có trong nhãn đó. Tiện ích này nói chung khá đơn giản, hôm nay mình sẽ chỉ các bạn vài thành phần cũng như hướng dẫn tùy biến nó như chia làm 2 cột, xổ xuống khi rê chuột vào.Để có được tiện ích này bạn vào Bố cục → Thêm tiện ích → Bạn sẽ thấy tiện ích Nhãn và hãy thêm nó vào Blog bạn. Nó sẽ như thế này:

Tiện ích này thì cũng quá quen thuộc, với giao diện trên thì chúng ta có thể chọn nhãn hiển thị, thứ tự sắp xếp theo bảng chữ cái hoặc tần suất và chọn kiểu hiển thị của nó!

Sau khi đã thêm tiện ích vào Blog, bạn hãy vào template và chỉnh sửa HTML (không mở rộng mẫu tiện ích) thì bạn sẽ thấy tiện ích Label như thế này:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'/>

Nhưng khi tích nào ô "Mở rộng mẫu tiện ích" bạn sẽ thấy nó khá phức tạp:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <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>
      </ul>
    <b:else/>
      <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>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Trong code trên có 1 số đoạn mình tô đỏ, dưới đây là chức năng của nó:

<data:title/>    Xuất ra tên tiện ích 

<data:label.name/>    Xuất ra tên nhãn hiển thị

<data:label.count/>    Xuất ra số lượng bài viết trong nhãn

Để chỉnh sửa về CSS cũng như hiển thị, bạn phải hiểu rõ nó hoạt động như thế nào. Đoạn code đó sẽ cho ta 2 kiểu hiển thị là kiểu List (đoạn code phía trên<b:else/>) hoặc Cloud (đoạn code phía dưới <b:else/>).

Tiện ích này khá đơn giản nên cũng không có nhiều class để các bạn có thế tùy biến:

#Label1 h2      Tiêu đề tiện ích

#Label1.label-count     Số lượng bài viết trong nhãn