Cách tạo mục lục cho bài viết Blogspot

Để tăng thêm tính chuyên nghiệp cho bài viết của mình, bạn có thể thêm mục lục các nội dung chính và đưa nó vào bài viết Blogspot

CSS code

  #toc_container{background: #f9f9f9;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Javascript Code

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

HTML code

Bước 1: thêm thuộc tính Id cho các phần chính của bài viết

Sau khi thực hiện xong bài viết, chuyển sang chế độ HTML, ví dụ bài viết có bố cục như sau:

,,,,,
<h3>Phần 1: abc</h3>
Nội dung phần 1
<h3>Phần 2: xyz</h3>
Nội dung phần 2
......

Bây giờ ta thêm thuộc tính Id cho các phần chính của bài viết như sau:

,,,,,
<h3 id="phan-1">Phần 1: abc</h3>
Nội dung phần 1
<h3 id="phan-2">Phần 2: xyz</h3>
Nội dung phần 2
......

(bạn thay đổi Id cho phù hợp với bài viết)

Bước 2:

Thêm đoạn code sau vào bài viết (chọn vị trí cho phù hợp):

<div id="toc_container">
Nội dung chính <span class="accordion active">[Ẩn/Hiện]</span>
<div class="panel show">
<ul class="toc_list">
<li><a href="#phan-1">Phần 1: abc</a></li>
<li><a href="#phan-2">Phần 2: xyz</a></li>
</ul>
</div>
</div>

Sau đó xuất bản bài viết và xem kết quả. Nếu ai muốn cách khác đơn giản hơn thì có thể tham khảo bài viết: Cách tạo mục lục Blogspot đơn giản. Chúc mọi người thành công.