Hướng dẫn tạo một mục lục bài viết mới nhất 2021 cho blogger

Việc một bài đăng bao gồm phần mục lục sẽ giúp cho cấu trúc của bài viết thêm chặt chẽ, hoàn chỉnh. Không những thế độc giả lại có thể tra cứu đến mục cần thiết nhất chứ không phải tìm đọc hết cả bài đăng, vốn phải mất rất nhiều thời gian. 

Bài này mình sẽ chia sẽ với các bạn cách tạo một mục lục bài viết mới nhất 2021 cho các bạn tham khảo nhé. Cách làm cũng không quá phức tạp, chỉ cần thực hiện theo 3 bước nhanh chóng như bên dưới mà thôi.

Phần demo kiểu mục lục, các bạn có thể tham khảo trực tiếp nagy chính bài đăng này nhé

{tocify} $title={Nội Dung Bài Đăng}

Mục lục bài viết mới nhất 2021 cho blogger gọn nhẹ cực đẹp kiểu templateify

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

Mục lục bài viết còn gọi là Table of Content vốn không lạ gì đối với các bạn sử dụng trên nền tảng wordpress. Tuy nhiên đối với blogger các bạn phải tự thêm vào thủ công để tạo nên những trải nghiệm hữu ích cho bài đăng có nội dung dài.

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

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

.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:38px;background-color:rgba(155,155,155,0.05);font-size:16px;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:16px;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> và lưu lại

Đoạn JS

<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

Khi viết bài các thẻ làm tiêu đề mục lục của bài viết các bạn bôi đen đoạn đó và chọn

• Tiêu đề lớn: Thẻ H1
• Tiêu đề : Thẻ H2
• Tiêu đề phụ: Thẻ H3
• Tiêu đề nhỏ: Thẻ H4

Chèn các thẻ tiêu đề bài viết cho blogspot để tạo một mục lục cho bài đăng

Các bạn có thể thử nghiệm các loại tiêu đề khác nhau để trải nghiệm xem cái nào phù hợp với bài đăng của các bạn. Riêng đối với blog của mình thì hầu như chỉ sử dụng thẻ H4 mà thôi, tức là mục tiêu đề nhỏ đó

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

Để xuất mục lục lên bài viết các bạn chèn {tocify} vào vị trí bất kỳ của bài viết ở chế độ Xem soạn thư sau đó bôi đen nó là được, Khi đó tiêu đề mục lục mặc định chữ Table of Contents

Để chỉnh sửa tiêu đề theo ý bạn thì thêm {tocify} $title = {Mục Lục Bài Đăng} và bôi đen nó lại là được

Ví dụ tiêu đề hiển thị chữ Mục lục {tocify} $title = {Mục lục}

Hoặc các bạn cũng có thể lấy các tiêu đề ví dụ như: Xem Nhanh, Nội Dung Chính, Các Chuyên Mục...

Ngoài ra, Các bạn cũng lưu ý đến đoạn code ở  bên dưới nhé

$("#toc").toc({
  content: ".post-body",
  headings: "h2,h3,h4"
})

Trong đó thẻ .post-body là thẻ bao quanh bài viết của bạn

headings: "h2,h3,h4" các bạn cài các thẻ để nó tự động nhận

Kết luận

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

Code bày được lấy từ các template mẫu templateify, tuy nhiên đã được tùy chỉnh thêm để tạo nên một mục lục bài viết cho blogspot được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh.

Chúc các bạn làm thành công!

P/S: So với kiểu mục lục cho blog 2020, kiểu mục lục mới này có ưu điểm hơn như phần thu gọn lại rất thuận tiện và chỉ mở ra khi độc giả nhấp vào tìm hiểu. Do đó sẽ không ảnh hưởng đến trải nghiệm của độc giả đối với nội dung chính trên bài đăng.