Chia nhãn label thành hai hoặc nhiều cột

Chia nhãn label thành hai hoặc nhiều cột

Ở bài viết này, Thiết Kế Web sẽ giúp bạn dễ dàng phân chia mục label theo nhãn thành nhiều cột tạo sự đa dạng chuyên nghiệp hơn cho Website của bạn.


☼ Cách Chia tiện ích Laber trong Blog ra thành 2 hay nhiều cột khác nhau có kèm số đếm.

1- Đăng nhập vào Blog
2- Vào mẫu (template).
3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin> .
.Label li{float:left;width:50%}

5- Xác định Id của laber bạn muốn chia cột. bằng cách vào thẻ Bố Cục (Layout) - Bấm vàochỉnh sửa tiện ích Label bạn muốn và xem Id của laber tại URL của laber widget như hình:

- Trong ví dụ này Widget mình muốn chia cột là label1 .
6- Tìm đến đoạn mã của widget label này (Ctrl + F với từ khóa id='Label1'). Các bạn sẽ tìm được đnạn mã tương tự như sau:

<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 đoạn mã của widget này có duy nhất 1 thẻ đóng </ul>, chèn đoạn mã dưới đây vào sau thẻ</ul>.

<div style="clear:both"/>

- Khi đó đoạn code trở thành như sau:

<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>
<div style="clear:both"/>
    <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>

- P/s: Thay vì khai báo với class Label chúng ta có thể đổi thành id Label1. Ở đây mình khai báo với class để có thể sử dụng tiếp cho các thành phần khác cùng kiểu hiển thị. Hoặc khai báo với class cloumn chẳng hạn, khi đó cần thay thẻ mở <ul> bằng <ul class='cloumn'>.

- Với 2 cột thì thuộc tính width có giá trị 50%, 3 cột sẽ là 33%... Đây là giá trị tương đối, bạn có thể sử dụng giá trị tuyệt đối. Giả sử widget này đặt ở sidebar có width là 300px, muốn hiển thị 2 cột giá trị width của thành phần li trong Label sẽ là 150px, 3 cột là 100px...

- Một điều đặc biệt lưu ý là giả sử widget này đặt ở sidebar và trong style sheet của bạn thành phần li của sidebar có thuộc tính margin cách trái hoặc phải với khoảng cách lớn hơn 0 thì bạn cần giảm giá trị width nhỏ hơn 50%.