[Blogspot] Thêm nút hiển thị tất cả các nhãn trên tiện ích Nhãn

Như chúng ta biết, tiện ích nhãn là một trong những yếu tố quan trọng trong blog phục vụ cung cấp thông tin cho khách truy cập để xem các bài đăng đã được gắn nhãn để khách truy cập có thể tìm kiếm các bài đăng trong bất kỳ danh mục nào trên blog.


Nếu chúng ta có một blog có rất nhiều bài đăng với số lượng nhãn lên đến hàng chục, hàng trăm nhãn thì nó sẽ hơi can thiệp vào sự xuất hiện của blog. Nhưng điều này có thể được khắc phục bằng cách giới hạn số lượng nhãn xuất hiện hoặc cũng có thể thay đổi Chức năng tiện ích nhãn thành Dropdown để sự xuất hiện của blog trông dễ nhìn và tối giản hơn.

Trong mẹo blogspot này, mình sẽ đưa ra các thủ thuật về Cách thêm nút hiển thị tất cả trên Tiện ích Nhãn  của Blogger, đây là các bước.

Cách thêm nút hiển thị tất cả trên tiện ích Nhãn

Trước tiên, hãy mở bảng điều khiển Blogger > Sau đó nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Đảm bảo trước khi tiến hành bạn đã thêm tiện ích nhãntrong bố cục blog > Tìm kiếm mã tiện ích Nhãn này:
<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>...</b:widget>
Thay thế tất cả các mã widget ở trên bằng mã  widget này:
<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>CLOUD</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <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 + &quot;?&amp;amp;max-results=10&quot;'><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 + &quot;?&amp;amp;max-results=10&quot;'><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>
   <a class='btn-more' href='#' title='Show all label'>Tất cả</a>
  </div>
</b:includable>
    </b:widget>
Tiếp theo thêm mã css này trước thẻ đóng </head> :
<style type='text/css'>
/* CSS Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left}#Label1 .label-size{display:block;float:left;line-height:1.2;margin:0 5px 5px 0;font-size:13px;font-weight:600;z-index:9;transition:initial}#Label1 .label-size a,#Label1 .label-size span{background:#4e72f8;display:inline-block;color:#fff;border:1px solid #4e72f8;padding:6px 12px;font-weight:600;border-radius:3px;transition:all .3s}#Label1 .label-size a:hover{background:#4667e1;color:#fff;border-color:#4667e1;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#f8f8f8}
#Label1 .label-size:nth-child(n+7){display:none}#Label1.open .label-size:nth-child(n+7){display:block}#Label1 a.btn-more{background:#4e72f8;display:block;color:#fff;border:1px solid #4e72f8;font-weight:600;border-radius:3px;transition:all .3s;float:left;overflow:hidden;line-height:1.2;padding:6px 12px;font-size:13px;margin:0 5px 5px 0}#Label1 a.btn-more:hover{background:#4667e1;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}#Label1 .widget-content{max-height:110px;overflow:hidden;overflow-y:visible}
</style>

Lưu ý: mã đước đánh dấu, (n+7) có nghĩa là chỉ có 6 nhãn sẽ được hiển thị, các nhãn còn lại sẽ bị ẩn đi và sẽ hiển thị tất cả khi bạn nhấp vào nút Tất cả.

Thêm mã này vào trước thẻ </body> :
<script type='text/javascript'>
//<![CDATA[
// Show all label
$("#Label1 .btn-more").on("click",function(e){e.preventDefault(),$(this).closest("#Label1").toggleClass("open")});
//]]>
</script>
Sau đó nhấp vào nút Lưu chủ đề và kết thúc. Để xem ví dụ về kết quả, hãy click vào đây.
Bài viết đã hết, cảm ơn bạn đã ghé thăm, nếu có ý kiến hãy để nó dưới phần bình luận nhé!

Bài đăng mới hơn Bài đăng cũ hơn

Bài viết liên quan