Tạo tiện ích label theo kiểu drop down

Trong mỗi blog thì thường có rất nhiều nhãn, nếu chúng ta hiển thị nó dưới dạng danh sách hay Cloud thì đều chiếm một diện tích khá lớn. Nếu bạn muốn tiết kiệm diện tích hơn thì hãy tham khảo bài hôm nay, mình sẽ hướng dẫn các bạn hiện thị label dưới dạng drop down.

#Thêm tiện ích Nhãn

1. Đăng nhập Blogger
2. Mẫu > Thêm tiện ích > Nhãn
3. Lưu lại.

• Nếu bạn đã có rồi thì thôi.
• Xác định id của widget nhãn, thông thường id của nó là label1 (http://khanh98.blogspot.com/2014/12/cach-xac-dinh-id-cua-cac-widget-trong-blogger.html)

#Chỉnh sửa HTML

1. Mẫu > Chỉnh sửa HTML

2. Chuyển tới tiện ích > [id widget mà bạn vừa tìm]

3. Mở rộng toàn bộ code, code trông như thế này

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

4. Thay thế toàn bộ code trên bằng code dưới

<b:widget id='Label1' locked='false' title='Categories' type='Label'> 
<b:includable id='main'> 
<b:if cond='data:title'> 
<h2><data:title/></h2> 
</b:if> 
<div class='widget-content'> 
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Chọn một nhãn để xem</option> 
<b:loop values='data:labels' var='label'> 
<option expr:value='data:label.url'><data:label.name/> 
(<data:label.count/>) <!-- nếu không muốn hiển thị số bài viết cạnh tên nhãn thì xóa dòng này-->
</option> 
</b:loop> </select> <b:include name='quickedit'/> </div> </b:includable> 
</b:widget>

Trong quá trình thay đổi bạn hãy chú ý tới id của widget, nếu code trên có id là label2 thì code bên dưới là label2, nói chung là phải cùng id
5. Save lại và xem kết quả.