Tùy biến widget Label theo danh sách thu gọn

Khi bạn chọn thêm mới tiện ích Label trong Blogger, bạn có 2 tùy chọn hiển thị theo dạng Danh sách và dạng Cloud. Bài này mình chỉ đề cập đến tùy chọn hiển thị theo dạng Danh sách và tác dụng của nó ai cũng thấy được là các label được sắp xếp trong một chuyên mục cụ thể có tùy chọn ẩn hiển khi click chuột.

Tóm tắt cách làm

Khi bạn đặt cấu hình hiển thị label theo Danh sách, bạn sẽ thấy có hai nhược điểm: Thứ nhất là dài nếu Blog của bạn đang sử dụng rất nhiều label, thứ hai các label được sắp xếp không theo một chuyên mục cụ thể nào khiến cho người đọc khó tìm kiếm. Tương tự như làm sub menu thì cách làm này cũng giống như vậy.

Trước hết mình sẽ giới thiệu qua về tùy chọn cấu hình tiện ích, ngoài tùy chọn hiển thị dạng danh sách bạn có thêm các tùy chọn:

- Hiển thị: Tất cả Nhãn hoặc Nhãn đã chọn.
- Sắp xếp: Theo thứ tự bảng chữ cái hoặc Theo tần suất ( nhãn nào có bài viết nhiều hơn đứng trước)

Ngoài ra bạn có thêm tùy chọn Hiển thị số bài đăng trên mỗi nhãn

Chúng ta sẽ chỉnh sửa lại thẻ bố cục XML của tiện ích nhóm các label vào một chuyên mục cụ thể, viết script cho nút ẩn hiện danh sách, viết css giao diện hiển thị.

Trước hết bạn cần biết các thẻ dữ liệu của label trong widget hiển thị theo vòng lặp b:loop như sau:

Copy

<b:loop values='data:labels' var='label'>

  <data:label.name/>

  <data:label.url/>

  <b:if cond='data:this.showFreqNumbers'>

  <data:label.count/>

  </b:if>

</b:loop>

Chỉnh sửa lại thẻ bố cục XML

Trong chỉnh sửa template, bạn chọn chuyển đến tiện ích Label, mở rộng thẻ bố cục tiện ích bạn sẽ thấy có một cặp thẻ: <b:includable id='list'>...</b:includable>, đây là tùy chọn hiển thị label theo Danh sách, bạn thay thế cặp thẻ này thành như sau:

Copy

<b:includable id='list'>

  <div class='list_items'>

    <div class='collapsible list_1'>;

      <span class='title'>Blogger</span>

      <span title='Thu gọn'>

        <svg class='chevron-up'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

      <span title='Mở rộng'>

        <svg class='chevron-down'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

    </div>

    <div class='list_label list_1'>

      <ul>

      <b:loop values='data:labels' var='label'>

        <b:if cond='data:label.name == &quot;blogger-template&quot;'>

        <li>

          <a expr:href='data:label.url' expr:title='data:label.name'>

            <span class='label-name'><data:label.name/></span>

            <b:if cond='data:this.showFreqNumbers'>

            <span class='label-count'><data:label.count/></span>

            </b:if>

          </a>

        </li>

        </b:if>

      <b:if cond='data:label.name == &quot;label-name&quot;'>



      </b:if>

      </b:loop>

      </ul>

    </div>

  </div>

  <div class='list_items'>

    <div class='collapsible list_2'>

      <span class='title'>Máy tính</span>

      <span title='Thu gọn'>

        <svg class='chevron-up'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

      <span title='Mở rộng'>

        <svg class='chevron-down'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

    </div>

    <div class='list_label list_2'>

      <ul>

      <b:loop values='data:labels' var='label'>

        <b:if cond='data:label.name == &quot;windows-setup&quot;'>

        <li>

          <a expr:href='data:label.url' expr:title='data:label.name'>

            <span class='label-name'><data:label.name/></span>

            <b:if cond='data:this.showFreqNumbers'>

            <span class='label-count'><data:label.count/></span>

            </b:if>

          </a>

        </li>

        </b:if>

        <b:if cond='data:label.name == &quot;label-name&quot;'>



        </b:if>

      </b:loop>

      </ul>

    </div>

  </div>

</b:includable>

Thẻ trên áp dụng cho 2 chuyên mục chính, nếu bạn thêm chuyên mục từ thứ 3 trở đi thì bạn thêm như sau:

Copy

  <div class='list_items'>

    <div class='collapsible list_3'>

      <span class='title'>Chuyên mục 3</span>

      <span title='Thu gọn'>

        <svg class='chevron-down'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

      <span title='Mở rộng'>

        &<svg class='chevron-down'>

          <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

        </svg>

      </span>

    </div>

    'list_label list_3'

      <ul>

      <b:loop values='data:labels' var='label'>

        <b:if cond='data:label.name == &quot;label-name&quot;'>

        <li>

          <a expr:href='data:label.url' expr:title='data:label.name'>

            <span class='label-name'><data:label.name/></span>

            <b:if cond='data:this.showFreqNumbers'>

            <span class='label-count'><data:label.count/></span>

            </b:if>

          </a>

        </li>

        </b:if>

        <b:if cond='data:label.name == &quot;label-name&quot;'>



        </b:if>

      </b:loop>

      </ul>

    </div>

  </div>

Mấu chốt vấn đề ở đây các label phải được đặt trong vòng lặp b:loop và bạn thêm tùy chọn điều kiện b:if bằng với một label cụ thể, ví dụ:

Copy

<b:loop values='data:labels' var='label'>

  <b:if cond='data:label.name == &quot;Tên label 1&quot;'>

  <li>

    <a expr:href='data:label.url' expr:title='data:label.name'>

      <span class='label-name'><data:label.name/></span>

      <b:if cond='data:this.showFreqNumbers'>

        <span class='label-count'><data:label.count/></span>

      </b:if>

    </a>

  </li>

  </b:if>

  <b:if cond='data:label.name == &quot;Tên label 2&quot;'>

  <li>

    <a expr:href='data:label.url' expr:title='data:label.name'>

      <span class='label-name'><data:label.name/></span>

      <b:if cond='data:this.showFreqNumbers'>

        <span class='label-count'><data:label.count/></span>

      </b:if>

    </a>

  </li>

  </b:if>

</b:loop>

Khi hiển thị ngoài giao diện có dạng như hình bên dưới với Blogger và Máy tính là các chuyên mục chính, bên dưới là danh sách các label của chuyên mục đó.

Viết script cho nút ẩn hiện danh sách

Với danh sách dạng thu gọn bạn viết script ẩn hiện danh sách khi click vào chuyên mục chính, các bạn chèn trước thẻ đóng </body> của template

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

$('.collapsible.list_1').click(function() {

  $('.list_label.list_1,.collapsible.list_1 .chevron-up,.collapsible.list_1 .chevron-down').toggle()

})

$('.collapsible.list_2').click(function() {

  $('.list_label.list_2,.collapsible.list_2 .chevron-up,.collapsible.list_2 .chevron-down').toggle()

})

//]]></script>

Kiểm tra nếu template đã có sẵn link /jquery.min.js thì xóa link jquery ở trên đi nhưng lưu ý đoạn script bắt buộc phải được đặt dưới link jquery đảm bào link tải trước khi áp dụng sự kiện trong script.

Nếu làm từ chuyên mục thứ 3 trở đi thì viết thêm một đoạn script

Copy

$('.collapsible.list_3').click(function() {

  $('.list_label.list_3,.collapsible.list_3 .chevron-up,.collapsible.list_3 .chevron-down').toggle()

})

Viết css giao diện hiển thị danh sách

Đoạn css bên dưới đang sử dụng với template của mình, các bạn tham khảo và chỉnh sửa thêm theo ý thích

Copy

.list-label-widget-content a {

    color: #000;

}

.list-label-widget-content a:hover {

    color: #365899;

}

.list-label-widget-content .list_items {

    position: relative;

    padding-top: 13px;

}

.list-label-widget-content .collapsible {

    display: block;

    cursor: pointer;

}

.list-label-widget-content .list_label {

    display: block;

}

.list-label-widget-content .collapsible svg.chevron-up {

    display: block;

}

.list-label-widget-content .collapsible svg.chevron-down {

    display: none;

}

.list-label-widget-content .collapsible svg {

    height: 24px;

    width: 24px;

    min-width: 24px;

    fill: hsl(0,0%,53.3%);

    position: absolute;

    right: 0;

    top: 13px;

}

.list-label-widget-content ul {

    margin-left: 25px;

}

.list-label-widget-content ul li {

    list-style-type: disc;

    font-size: 15px;

}

.list-label-widget-conten ul li a {

    padding: 6.5px 0;

    display: block;

    color: #000;

}

.list-label-widget-content .label-count {

    float: right;

    font-size: 15px;

}

.list-label-widget-content .label-count:before {

    content: "(";

}

.list-label-widget-content .label-count:after {

    content: ")";

}

Trong đoạn css ở trên, các bạn để ý phần bên dưới

Copy

.list-label-widget-content .list_label {

    display: block;

}

.list-label-widget-content .collapsible svg.chevron-up {

    display: block;

}

.list-label-widget-content .collapsible svg.chevron-down {

    display: none;

}

Đang áp dụng với danh sách hiển thị sổ ra sẵn, nếu các bạn muốn danh sách này ẩn đi chỉ còn các danh mục chính thì thay ngược lại như sau:

Copy

.list-label-widget-content .list_label {

    display: none;

}

.list-label-widget-content .collapsible svg.chevron-up {

    display: none;

}

.list-label-widget-content .collapsible svg.chevron-down {

    display: block;

}

Trong quá trình chỉnh sửa có thể bạn sẽ gặp khó khăn hay không hiểu chỗ nào đừng ngại để lại commnet bên dưới, mình sẽ hỗ trợ bạn.

Nội dung chính