Header Ads

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp

Bài viết này sẽ hướng dẫn các bạn cách lập MỤC LỤC tại một bài viết trong website (Blogspot), nhằm tạo cho nội dung bài viết được rõ ràng cho người đọc và website trở nên chuyên nghiệp hơn...

Ví dụ MỤC LỤC trong bài viết:

Bước 1:

Đầu tiên là đoạn code CSS (làm đẹp đoạn mục lục): Mở code html của website Blogspot: Tìm nơi chèn, các bạn ấn Ctrl + F tìm ]]></b:skin> Copy chèn đoạn code CSS bên dưới vào trước ]]></b:skin>

/*===================================== 
= CSS TẠO MỤC LỤC
=====================================*
#toc_container{background: #edf6ff;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: #52b043;font-weight: 555;}#toc_container a:hover {color: #d7c20d;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 20px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Bước 2:

Copy đoạn code Javascript bên dưới và chèn vào sau thẻ <head> hoặc trước thẻ </body> (Ấn Ctrl + F để tìm nhanh đến code <head> hoặc </body>) hoặc trước thẻ

<!-- #CODE ẨN/HIỆN MỤC LỤC -->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Bước 3:

Khi tạo bài viết các bạn sử dụng ID để cho phép lập chỉ mục tìm đến nội dung theo mục lục ví dụ bên dưới:

<div id="toc_container">
<b>MỤC LỤC: Nội dung bài viết</b>&nbsp; <span class="accordion active">[Ẩn/Hiện]</span>
<br />
<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: abc</a></li>
<li><a href="#phan-3">Phần 3: abc</a></li>
<li><a href="#phan-4">Phần 4: abc</a></li>
<li><a href="#phan-5">Phần 5: abc</a></li>
</ul>
</div>
</div>

Bước 4:

Ở nội dung muốn chỉ mục đến được các bạn phải dùng thẻ H3 (Tiêu đề con) và thêm ID tương ứng như ví dụ code bên dưới:

<h3 id="phan-1"> 1. Nội dung Abc</h3>
       Nội dung bài viết của phần 1 ở đây
<h3 id="phan-2"> 2. Nội dung Abc</h3>
       Nội dung bài viết của phần 2 ở đây
<h3 id="phan-3"> 3. Nội dung Abc</h3>
       Nội dung bài viết của phần 3 ở đây
<h3 id="phan-4"> 4. Nội dung Abc</h3>
       Nội dung bài viết của phần 4 ở đây
<h3 id="phan-5"> 5. Nội dung Abc</h3>
      Nội dung bài viết của phần 5 ở đây

Lời kết:

Việc lập mục lục cho website blogspot yêu cầu các bạn có một chút kiến thức HTML là có thể sử dụng đơn giản. Trong quá trình thực hiện hướng dẫn này nếu các bạn gặp vướng mắc vui lòng liên hệ mình sẽ hướng dẫn chi tiết hơn... Cảm ơn và chúc các bạn thành công!

Thế Linh

10 nhận xét:

  1. Nhận cuộc sống tươi đẹp với http://alphalipidhaiphong.blogspot.com

    Trả lờiXóa
  2. tới phần thứ 3 là mik k hỉu bạn nói gì lun rùi, thêm gì và thêm ở đâu? bạn viết bài hướng dẫ kỹ hơn nhé!! Chúc bạn thành công

    Trả lờiXóa
    Trả lời
    1. Việc này bạn cần am hiểu một xíu cơ bản về HTML mới làm đc nha bạn

      Xóa
    2. làm dc rồi mà chỉnh cái khung viền nhỏ lại mãi mà không được

      Xóa
    3. đoạn này border: size style color; để chỉnh viền đó ak

      Xóa
  3. khi mình nhấp vào danh mục thì nó cũng nhảy đến vị trí cần đến nhưng mất luôn danh mục chẳng hiểu sao nữa

    Trả lờiXóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. Vượng23:35 5/1/23

    Em hỏi một chút, làm cách nào để không hiện id trên đường dẫn URL, vì khi lập chỉ mục ở thẻ A thì khi click nó sẽ hiện ID lên đường dẫn, em muốn nó k hiện lên nhưng vẫn chạy đúng như lúc nó hiện, mong anh hướng dẫn

    Trả lờiXóa

Được tạo bởi Blogger.