Tạo Mục Lục Bài Viết Tự Động Cho Blogger -table of contents

 Để tạo mục lục bài viết tự động cho Blogger, bạn có thể sử dụng đoạn mã HTML và JavaScript. Dưới đây là hướng dẫn cách bạn có thể tạo mục lục bài viết tự động cho trang Blogger của mình:

Các bước thực hiện:

1. Chỉnh sửa HTML Template của Blogger:

   • Truy cập trang Blogger của bạn và mở phần Theme.
   • Chọn Customize và sau đó chọn Edit HTML.

2. Thêm mã CSS cho mục lục: Đầu tiên, bạn cần thêm CSS vào phần <style> của template để định dạng cho mục lục. Bạn có thể thêm mã này vào phần trước thẻ ]]></b:skin> của template:

/*CSS MUC LUC table of content*/
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:rgba(155,155,155,0.05);font-size:24px;color:#344955;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}
 



[next]


3. Thêm mã JavaScript để tạo mục lục tự động: Tiếp theo, bạn cần thêm mã JavaScript để tự động quét các tiêu đề trong bài viết và tạo mục lục. Đoạn mã JavaScript này có thể được thêm vào phần thẻ đóng </body> của template:

<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"):"Table of Contents",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>
   

[next]
4. Khi viết bài ở chế độ Xem soạn thư thì các bạn chọn tiêu đề lớn, tiêu đề, tiêu đề phụ như hình bên dưới:

5. Khi viết bài ở chế độ Xem HTML thì các tiêu đề tương ứng lần lượt là:
+ Chọn Tiêu đề lớn: đó chính là thẻ H1
+ Chọn Tiêu đề : đó là thẻ H2
+ Chọn Tiêu đề phụ: đó là thẻ H3
+ Chọn Tiêu đề nhỏ: đó là thẻ H4
6. Để mục Lục xuất hiện sau khi soạn xong, các bạn qua chế độ Xem HTML dán đoạn mã được in đâm  {tocify} $title = {Mục lục bài viết} tại nơi muốn xuất hiện mục lục: [code type="CSS"] <b>{tocify} $title = {Mục lục bài viết}</b> [/code]