Hiển thị nhãn (Label) hoặc danh sách liên kết (Link List) theo kiểu "Đóng/mở" trên Google Blogger

Làm thế nào để các nhãn bài viết hay một danh sách các link được tạo bằng các tiện ích này có thể đóng/mở (ẩn/hiện) chỉ bằng một thao tác nhấn chuột? Với một danh sách liên kết thật dài, hay một blog có rất nhiều nhãn bài viết ví dụ như blog này, việc cho chúng ẩn đi sẽ làm giao diện blog trở nên gọn hơn. Khi người đọc có nhu cầu họ dễ dàng click xem nội dung.

Công việc có thể tiến hành qua các bước:

Bước 1. Đăng nhập Blogger, hãy kiểm tra bạn đã dùng tiện ích Label (Nhãn) nào chưa trên Layout (Trình bày). Nếu chưa nhấn Add a Page Element (Thêm phần tử trang) để thêm.


Bước 2. Nhấn Edit HTML (Chỉnh sửa HTML) để sao lưu template bạn đang dùng.

Bước 3. Chép đoạn code phía dưới đây dán phía trên thẻ </head> trong khung Edit Template (Chỉnh sửa mẫu) và lưu lại.

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

Bước 4. Nhấn vào ô Expand Widget Templates (Mở rộng mẫu tiện ích). Bây giờ hãy tìm vị trí của từ khóa id='label1' (Dùng hai phím Ctrl + F để hiện hộp thoại và tìm kiếm với từ khóa này). Nếu bạn sử dụng cho nhãn thứ hai hãy dùng từ khóa id='label2'.

Đoạn mã mà bạn nhìn thấy sẽ như bên dưới.

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

Bước 5. Hãy bổ sung phần chữ in đậm vào đúng vị trí hoặc bạn chép hết code này thay thế đoạn code trên và thay đổi những chữ màu đỏ và xanh (nếu cần).

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

Giải thích thêm, các chữ màu đỏ PHANLOAI là một tên phân biệt duy nhất, giống nhau ở một tiện ích, bằng tiếng Anh hoặc Việt không dấu. Không trùng khi bạn dùng kiểu hiện thị này cho nhiều tiện ích khác. Nghĩa là nếu bạn dùng cho hai tiện ích nhãn ở cùng một blog, bạn phải đặt chúng phân biệt, chẳng hạn PHANLOAI1, PHANLOAI2. Chữ màu xanh [+] MỞ hay [-] ĐÓNG là chữ hiển thị mà bạn nhìn thấy trên blog. Thật ra giữa mở và đóng chỉ có một đoạn code, bạn nhấn trên [+] MỞ khi danh sách nhãn bài viết hiện ra cũng chính là đóng!

Tương tự bạn có thể tìm với từ khóa id='LinkList1', id='HTML1' ... nếu muốn ẩn các tiện ích Link List, HTML/JavaScript...

Chúc thành công!