Thể hiện Widget Label với nhiều cột

VNC - Blogger quản lý chủ đề của blog bởi những tên label. Có người sử dụng chúng như những Category trong Wordpress và để ở dạng list, cũng có người thì sử dụng như những thẻ Tag và để ở dạng cloud. Nếu blog của bạn đang hiển thị label ở dạng list, không cần quan tâm đến số đếm bài viết trong mỗi label và cũng không thường xuyên tạo một label mới thì không cần thiết phải sử dụng widget label của Blogger. Hãy tự tạo widget HTML/Javascript hoặc chèn ngay trong template đoạn mã để hiển thị những label, việc này sẽ giúp Blogger không mất công xử lý dữ liệu từ widget label rồi chỉ để hiển thị điều mà chúng ta có thể tự làm được với mã HTML đơn giản.

Còn nếu như bạn muốn dùng widget label để hiển thị số đếm bài viết, tự động cập nhật tên label mới và đang để hiển thị theo dạng list thì có một điều bất tiện là danh sách label này chỉ gồm 1 cột. Để hiển thị dưới dạng 2 cột hoặc nhiều hơn chúng ta thêm một vài thuộc tính cho style sheet của blog.

☼ Ảnh DEMO cho bài viết:

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào thiết kế
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 Label bạn muốn chia cột. bằng cách Đăng nhập vào blog - Thiết kế - Phần tử trang (Bố Cục) - Bấm vào Chỉnh sửa Label bạn muốn và xem ID của Label tại URL của Label 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%.

Nguồn bài đăng: Namkna