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

Bài viết này mình hướng dẫn cách Tạo mục lục bài viết tự động cho blogspot, Table of Contents cho blogspot với nhiều cấp tự động nhận thẻ H2, H3, H4 làm mục lục của bài viết.
Tạo Mục Lục Bài Viết Tự Động Cho Blogger

Mục lục bài viết blogspot là gì?

Mục lục trong bài viết sẽ giúp người đọc dễ dàng di chuyển đến phần họ muốn mà không cần phải kéo chuột quá lâu. Đồng thời, nó như một bảng sắp xếp nội dung của bạn được ngăn nắp và dễ hiểu hơn. Chẳng hạn, với một bài viết có nội dung khá dài như thế này nếu không có mục lục rất khó để giữ chân khách hàng lâu hơn.

Cách cài đặt mục lục bài viết cho blogspot.

Bước 1: Thêm CSS

- Đăng nhập vào Blogger, vào phần chủ đề và chọn chức năng Tùy chỉnh chủ đề.

- Các bạn copy CSS bên dưới dán trước thẻ đóng </b:skin> và lưu lại.

*** Chú ý quan trọng: cách chuẩn nhất là bạn hãy copy đoạn code bên dưới sang Notepad, sau đó mới copy từ notepad sang trình HTML chỉnh sửa nhằm tránh sai xót về định dạng.

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}

Bước 2: Thêm JS

Các bạn copy đoạn JS bên dưới dán trước thẻ đóng </body> ở blogger và lưu lại. Đoạn JS bên dưới.

*** Chú ý quan trọng: cách chuẩn nhất là bạn hãy copy đoạn code bên dưới sang Notepad, sau đó mới copy từ notepad sang trình HTML chỉnh sửa nhằm tránh sai xót về định dạng.

<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>

Bước 3 : Viết bài

- Vào Blogger soạn thảo bài viết như bình thường.

- Khi viết bài viết thì phần bạn muốn làm tiêu đề cho mục lục thì chọn các thẻ H1, H2, H3, H4 cho tiêu đề đó. Cách đơn giản nhất là bạn bôi dòng muốn làm tiêu đề, rồi click chuột để chọn phân loại:

    + 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
Bôi dòng muốn làm tiêu đề và Chọn Tiêu đề ở trình soạn thảo

Bước 4: Xuất mục lục lên bài viết

- Để mục lục bài viết tự động được hoạt động ở bài viết bạn soạn thảo bài viết bình thường, nơi nào bạn muốn xuất hiện phần mục lục tự động thì bạn chèn chữ {tocify} nhớ phải bôi đậm chữ {tocify} này thì chức năng mới hoạt động, nhiều bạn quên bôi đậm nên chức năng không hoạt động. Khi đó mục lục có tên mặc định là Table of Contents.

- Nếu bạn muốn không muốn dùng từ Table of Contents mà muốn thay vào đó là chữ Mục lục bài viết thì bạn chèn đoạn sau {tocify} $title = {Mục lục bài viết}, phải nhớ là bắt buộc bôi đen {tocify} $title = {Mục lục bài viết} nhé.

*** Chú ý quan trọng: cách chuẩn nhất là bạn hãy copy đoạn code bên dưới sang Notepad, sau đó mới copy từ notepad sang trình soạn thảo bài viết nhằm tránh sai xót về định dạng, sau đó bạn bôi đậm chữ viết là được.
chèn đoạn sau {tocify} $title = {Mục lục bài viết} vào phần muốn hiển thị mục lục bài viết
Kết quả đạt được khi chèn đúng {tocify} $title = {Mục lục bài viết}
- Sau đó nhấn Xuất bản bài đăng là mục lục bài viết sẽ tự động xuất hiện.

Kết luận về cách tạo mục lục tự động cho blogger

Như vậy là bạn đã tạo được mục lục bài viết tự động cho blogspot đơn giản, bao gồm mục lục con rất đẹp mắt.

Chúc bạn thực hiện thành công.

Chú ý: code này được được tách từ trang templateify chuyên blogger, nếu bạn tạo mục lục bài viết tự động cho blogger thành công thì hãy để lại bình luận bên dưới dành tặng tác giả lời khen tặng nhé, còn nếu thất bại thì chỉ có cách duy nhất là đọc kỹ lại lần nữa, copy và paste cho thật chính xác thì đảm bảo sẽ thành công 100%.

Theo chia sẻ từ anh Cao Trung Hiếu - người sáng lập và điều hành DanTriSoft


4 Nhận xét
  1. Góp ý những blog ko có class .post-body thì sẽ không hiện dc nhé, cần ghi chú thêm là xác định vùng blog xài class gì để thay vào

    Trả lờiXóa
  2. BẠN VIẾT BÀI THÌ HAY NHƯNG KHI THỰC Y NHƯ VẬY NÓ CHẢ CÓ HIỆN CÁI GÌ HẾT BẠN NÊN ĐIỀU CHỈNH BÀI VIẾT MÌNH ĐỂ TỘI CHO NHỮNG NGƯỜI VÀO LÀM THỬ MÀ KHÔNG HIỆU QUẢ

    Trả lờiXóa
    Trả lời
    1. Bạn nên kiểm tra lại đã làm đúng chuẩn xác 100% chưa, hoặc xem blog của bạn có cho phép tạo mục lục bài viết không vì nếu template bị ai đó tùy biến và không có chức năng này thì chẳng có cách nào làm được bạn nhé. Còn hướng dẫn trên là đúng với các blog chuẩn.

      Xóa
  3. Mình đã làm được trên blogthuaphatlai.vn nhưng muốn nó tự động hiện mục lục mà không cần nhấp vào nút ba gạch sổ xuống thì phải làm ntn vậy. Xin cảm ơn!

    Trả lờiXóa