Thu gọn chuyên mục nhãn Blogger

LongAnIT 9/18/2018

Việc Customize nhãn Blogger có nhiều cách thường thì làm đẹp bằng CSS sắp sếp kiểu hiển thị... Tuy nhiên nếu như Blog của bạn có ít nhãn thì không vấn đề gì nhưng nếu nhiều nhãn và chuyên mục thì lại có vấn đề ở đây nó làm chậm tốc độ load trang cho Blog của bạn.

Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn tùy biến Widget nhãn cho Blogger bằng cách thu gọn lại kiểu Select Option. Bạn làm theo các bước như tôi hướng dẫn bên dưới nhé.

Bước 1: Blogger - Bố cục - Thêm tiện ích trong danh sách bạn chọn chuyên mục "Nhãn" như hình bên dưới để thêm widget Label vào blog của bạn.


Bước 2: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML. Chuyển đến tiện ích nhãn mà lúc ban đầu bạn đã tạo như hình bên dưới.


Bước 3: Click vào dấu ... mục " Label" để mở rộng code ra bạn để ý dòng code này code trích dẫn ngay bên dưới.


<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ước 4: Copy đoạn code bên dưới và thay thế toàn bộ đoạn code bên trên.

 <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By categories</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>
 Thay đổi dòng chữ màu đỏ thành nội dung bạn cần thay đổi. Chúc các bạn thành công!

No comments:

Post a Comment

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây