Cách Tạo Mục Lục Tự Động Cho Blogspot Vô Cùng Đơn Giản

Nếu bạn là người dùng nền tảng WordPress, tất nhiên sẽ rất dễ dàng với sự trợ giúp của plugin để tạo mục lục trong bài viết. Người dùng nền tảng blogger không có một plugin, hãy cùng tìm hiểu cách tạo mục lục trên blogger. Trước khi tiếp tục phần hướng dẫn, chúng ta sẽ thảo luận về vấn đề mục lục .

---

Mục lục là gì?

Mục lục từ một bài viết, mục đích là giúp người dùng dễ dàng chuyển đến phần của bài viết mà họ muốn đọc, vì vậy khi người dùng nhấp vào nội dung của mục lục, người dùng sẽ được chuyển hướng ngay lập tức đến phần họ muốn đọc.

Cách cài đặt mục lục tự động trên Blogger

• Bước 1: Đăng nhập vào tài khoản blogger
• Bước 2: Chọn Chủ đề => Chỉnh sửa HTML
• Bước 3: Sau đó sao chép CSS và Javascript sau và đặt nó trước mã </head> hoặc </body>

  <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
  <style media='all' type='text/css'>
  .bwstoc {
   margin: 10px 0;
   background: #F0F0F0;
   border: 1px solid #ddd;
  }
  .bwstoc ol, .bwstoc ul {
   margin: 0 0 15px 20px;
   padding: 0;
  }
  .bwstoc ul {
   list-style: disc;
  }
  .bwstoc ol li, .bwstoc ul li {
   font-size: 95%;
   padding: 5px 10px 0 0;
   margin: 0 0 0 30px;
  }
  .bwstoc a {
   text-decoration: none;
  }
  .bwstoc a:hover {
   text-decoration: underline;
  }
  .bwstoc .bwstocHeader {
   font-weight: bold;
   font-size: 100%;
   position: relative;
   outline: none;
   border: none;
   padding: 5px 15px 5px 5px;
   margin: 5px 10px;
  }
  .bwstoc .bwstocHeader a {
   text-decoration: none;
   cursor: pointer;
  }
  .bwstoc .bwstocHeader a:hover {
   text-decoration: underline;
  }
  </style>
  <!-- Blogger TOC -->
  <script type='text/javascript'>
  //<![CDATA[function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) {  // Only Shown If At least 2 Headings are Found for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
   var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
   var bws_2 = bws_1.trim();
   var getHeadUri = bws_2.replace(/s/g, "_");
   document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
   bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
   document.getElementById("bwstoc").innerHTML += bwstoc;
   }
   } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
  }
  function bwstocShow() {
      var bwstocBtn = document.getElementById('bwstoc');
   var bwstocWrapID = document.getElementById('bwstocwrap');
   var bwstocLink = document.getElementById('bwstocLink');
      if (bwstocBtn.style.display === 'none') {
          bwstocBtn.style.display = 'block';
   bwstocWrapID.style.display = 'block';
   bwstocLink.innerHTML = 'Hide';
   
      } else {
          bwstocBtn.style.display = 'none';
   bwstocWrapID.style.display = 'inline-block';
   bwstocLink.innerHTML = 'Show';
      }
  }
  //]]>
  </script>
  <noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
  </b:if>

• Bước 4: Bạn gõ Ctrl + F để hiển thị thanh tìm kiếm và tìm kiếm mã <data:post.body/>

  <div id='post-toc'>
  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Table of Contents [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>
  <data:post.body/>
  <script>bwstoc();</script>
  </div>

• Bước 5: Lưu lại

Làm thế nào để mục lục trong các bài viết trên Blog xuất hiện

Đoạn mã javascript trên sẽ tự động đọc thẻ tiêu đề h3 và h4 , sau đó sẽ trở thành mục lục. Để mục lục xuất hiện, hãy đảm bảo rằng bạn sử dụng subheading hoặc minor headings khi viết bài.

Tổng kết

Đó là tất cả những điều mình chia sẻ về cách tạo mục lục tự động cho Blogspot.Nếu bạn có bất kỳ câu hỏi nào hay vấn đề bản quyền, hãy bình luận bên dưới. Mình hy vọng bài viết này hữu ích.

Go to Link