Customize the Label widgets in a collapsible list

When you choose to add the new Label widget in Blogger, you have two options listed in the form of List and Cloud. This article only refers to the option displayed in the form of the List and its effect to see that the labels are arranged in a specific category has the option to hide when clicked.

Summary of how to do it

When you set up a label display by List, you will see two disadvantages: First, if your blog is using a lot of labels, secondly, labels are not organized into a specific category. makes the reader difficult to find. Similar to making sub menus, this is the same way.

First of all I will go through the configuration options utility, in addition to display options list you have additional options:

- Display: All selected Labels or Labels.
- Sort by alphabetical order or by frequency (which labels have more posts than before).

Also you have the option to show the number of posts per label.

We will revise the XML tag of the label gadget to a specific category, write a script for the button hiding the list, and write the css of the display interface.

First of all you need to know the label data tags in the widget display in the b: loop loop as follows:

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>

Modify the XML layout tag

In template editing, you choose to go to the Label utility, expand the gadget layout tag you will see a couple of tags: <b: includable id = 'list'> ... </ b: includable>, this is The option to display labels by List, you replace this pair of tags as follows:

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>

The above card applies to 2 main categories, if you add categories from 3 onwards you add as follows:

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>

The problem here is that the labels must be placed in the b: loop and you add the b: if conditional option to a specific label, for example:

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>

When displaying outside of the interface as shown below with Blogger and Computer as the main categories, below is a list of labels for that category.

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

Write script for hidden button listing

With a collapsible list you write a script that hides the list when you click on the main category, you insert before the </ body> tag of the 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>

Check if the template is available link /jquery.min.js delete the jquery link above but note that the script must be placed under jquery link to load the link before applying the event in the script.

If you do from the third column onwards, write a script

Copy

$('.collapsible.list_3').click(function() {
  $('.list_label.list_3,.collapsible.list_3 .chevron-up,.collapsible.list_3 .chevron-down').toggle()
})

Write css interface display list

The css below is used with his template, you refer and edit as you like

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: ")";
}

In the css above, you notice the section below

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

If you want this list to hide only the main categories, the opposite is as follows:

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

During the editing process you may have difficulty or do not understand where do not be afraid to leave the commnet below, I will support you.