How to post labels or a list of links generated by this utility can open / close (hide / show) with a quick mouse clicks? With a very long l...

How to post labels or a list of links generated by this utility can open / close (hide / show) with a quick mouse clicks? With a very long list of links, or a blog post a lot of labels like this blog, for them to hide the blog interface will become more compact. When the reader needs them to easily click view content.

The work can proceed through the steps of:

Step 1. Sign in Blogger, check you have used utility Label (label) that are not on the Layout (presentation). If not click Add a Page Element (Add page element) to add.

Step 2. Click Edit HTML (Edit HTML) to backup template you are using.

Step 3. Copy the following code pasted above the </ head> Edit Template frame (Edit form) and save.

  <style type='text/css'>
.commenthidden {display:none}
.commentshown {display:inline}
</style>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
  if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else
{ whichpost.className="commentshown"; }
}
</script>

Step 4. Click Expand Widget Templates box (Expand widget templates). Now look for the location of the tag id = 'label1' (Use Ctrl + F keys to both the dialog and search for keywords). If you use the labels use the keyword Monday id = 'label2'.

The code that you see will be as shown below.

  <b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
  <div class='widget-content'>
    <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>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
      </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Step 5. Please add text in bold into the correct position or you copied this code replace the code above and change the red and blue letters (if necessary).

  <b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[+] MỞ</a>
  <div class='commenthidden' id='PHANLOAI'>

  <div class='widget-content'>
    <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>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
    </div>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[-] ĐÓNG</a>
  </div>

</b:includable>
</b:widget>

Explaining further, the red letters PHANLOAI is a unique distinguished name, the same in a utility, in English or Vietnamese unsigned. Not the same when you use this display type for many other utilities. This means that if you use labels for the two utilities in the same blog, you must put them to distinguish, such PHANLOAI1, PHANLOAI2. Blue text [+] Open or [-] line is a show that you see on the blog. In fact the only one open and close the code, click on [+] Open the label lists the current article also is closed! Similarly you can search with keywords id = 'LinkList1', id = 'HTML1' ... if you want to hide the Link List gadget, HTML / JavaScript ... Good success!