Hướng Dẫn Chi Tiết Tạo Mục Lục Tự Động (Table of Contents - TOC) Cho Blogger

 

Việc tạo mục lục tự động cho bài viết trên Blogger không chỉ giúp người đọc dễ dàng điều hướng trong bài viết mà còn hỗ trợ SEO, làm cho trang của bạn thân thiện hơn với công cụ tìm kiếm. Dưới đây là hướng dẫn chi tiết cách thêm mục lục tự động cho blog của bạn, dựa trên file bạn đã cung cấp.

{tocify} 

---

Bước 1: Thêm CSS vào Blogger

CSS giúp định dạng và tạo phong cách cho mục lục (TOC) của bạn. Đây là bước đầu tiên cần thực hiện:

1. Đăng nhập vào Blogger, chọn Chủ đề (Theme), sau đó nhấn vào Tùy chỉnh chủ đề (Customize).

2. Sau đó, tìm đoạn </b:skin> và dán đoạn CSS sau trước thẻ này:

    post-body ul{padding:0 0 0 15px;margin:10px 0}
    .rtl .post-body ul{padding:0 15px 0 0}
    .post-body li{margin:5px 0;padding:0}
    .post-body ul li,.post-body ol ul li{list-style:none}
    .post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}
    .rtl .post-body ul li:before{margin:0 0 0 5px}
    .post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0}
    .rtl .post-body ol{padding:0 15px 0 0}
    .post-body ol > li{counter-increment:ify;list-style:none}
    .post-body ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0}
    .rtl .post-body ol > li:before{margin:0 0 0 5px}
    #toc li a{color:#4285f4;font-weight:normal}
    .tocify-wrap{display:block;width:100%;clear:both;margin:0}
    .tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:var(--title-color);line-height:1.6em;border-radius:4px}
    a.tocify-title{position:relative;height:58px;background-color:rgb(255, 6, 6);font-size:24px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:4px}
    a.tocify-title.is-expanded{border-radius:4px 4px 0 0}
    .tocify-title:after{content:'\2261';font-size:18px;font-weight:400;margin:0 0 0 25px}
    .rtl .tocify-title:after{margin:0 25px 0 0}
    .tocify-title.is-expanded:after{font-weight:900}
    a.tocify-title:hover{text-decoration:none}
    #toc{display:none;padding:8px 15px;margin:0}
    #toc ol{padding:0 0 0 15px}
    .rtl #toc ol{padding:0 15px 0 0}
    #toc li{font-size:14px;margin:7px 0}
    #toc li a:hover{color:#4285f4;text-decoration:underline}

Bước 2: Thêm Mã JavaScript (JS)

JavaScript sẽ giúp mục lục tự động lấy các tiêu đề từ bài viết của bạn. Để làm điều này, bạn cần thêm đoạn mã sau:

1. Vào Blogger, trong phần Chủ đề (Theme), nhấn Edit HTML (Chỉnh sửa HTML).

2. Tìm thẻ </body> và dán đoạn mã JavaScript sau trước thẻ này:

<b:if cond='data:view.isSingleItem'>
  <script>
    //<![CDATA[
function shortCodeIfy(t,n,i){for(var e=t.split("$"),o=/[^{\}]+(?=})/g,c=0;c<e.length;c++){var a=e[c].split("=");if(a[0].trim()==n)return null!=(i=a[1]).match(o)&&String(i.match(o)).trim()}return!1}!function(t){"use strict";var n=function(n){return this.each(function(){var i,e,o=t(this),c=o.data(),a=[o],r=this.tagName,s=0;i=t.extend({content:"body",headings:"h1,h2,h3"},{content:c.toc||void 0,headings:c.tocHeadings||void 0},n),e=i.headings.split(","),t(i.content).find(i.headings).attr("id",function(n,i){return i||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),i="",e=1;null!==document.getElementById(n+i);)i="_"+e++;return n+i}(t(this).text())}).each(function(){var n=t(this),i=t.map(e,function(t,i){return n.is(t)?i:void 0})[0];if(i>s){var o=a[0].children("li:last")[0];o&&a.unshift(t("<"+r+"/>").appendTo(o))}else a.splice(0,Math.min(s-i,Math.max(a.length-1,0)));t("<li/>").appendTo(a[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),s=i})})},i=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=i,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery),$(".post-body b").each(function(){var t=$(this),n=t.text();n.toLowerCase().trim().match("{tocify}")&&(n=0!=shortCodeIfy(n,"title")?shortCodeIfy(n,"title"):"Mục lục bài viết",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+n+'">'+n+'</a><ol id="toc"></ol></div></div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#toc").slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"}),$("#toc li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})}))});
    //]]>
  </script>
</b:if>

Bước 3: Soạn Thảo Bài Viết

• Khi soạn thảo bài viết, chọn các tiêu đề (heading) mong muốn làm mục lục. Ví dụ:
  • Tiêu đề lớn: Thẻ H1.
  • Tiêu đề chính: Thẻ H2.
  • Tiêu đề phụ: Thẻ H3.
  Bạn có thể chọn những đoạn này trong trình chỉnh sửa văn bản khi soạn thảo bài viết.

Bước 4: Hiển Thị Mục Lục

• Khi soạn thảo bài viết, bạn có thể chèn chữ {tocify} vào vị trí bạn muốn hiển thị mục lục. Hãy nhớ bôi đen in đậm {tocify} để nó hoạt động.  
• 
  
  
  
  

Kết Luận

Việc thêm mục lục tự động cho Blogger là một cách giúp cải thiện trải nghiệm người dùng, đồng thời tăng hiệu quả SEO cho blog. Hãy thực hiện theo các bước trên để trang blog của bạn trở nên chuyên nghiệp hơn. Chúc bạn thành công!