Hướng dẫn tạo mục lục bài viết tự động cho Blogspot

Mục lục bài viết

Bạn có mệt mỏi khi người đọc phải cuộn mãi không ngừng qua các phần bài đăng trên blog của bạn để tìm thông tin họ cần không? Bạn đã bao giờ mong muốn có một cách để làm cho nội dung của mình có tổ chức hơn và dễ truy cập hơn chưa? Tin vui cho người dùng Blogspot, mục lục bài viết tự động là một giải pháp mà aHí giới thiệu đến các bạn trong bài viết này.

Giới thiệu

Với mục lục tự động, giờ đây bạn có thể tạo mục lục cho các bài đăng trên blog của mình chỉ bằng vài cú nhấp chuột. Mục lục sẽ xuất hiện ở đầu bài đăng của bạn, cho phép người đọc nhanh chóng điều hướng đến các phần mà họ quan tâm. Điều này không chỉ làm cho nội dung của bạn thân thiện hơn với người dùng mà còn giúp cải thiện việc tối ưu hóa công cụ tìm kiếm (SEO) bằng cách giúp các công cụ tìm kiếm hiểu cấu trúc bài đăng của bạn dễ dàng hơn.
Vậy làm thế nào nó hoạt động? Về cơ bản, bạn tạo danh sách các liên kết đến từng phần trong bài đăng của mình và khi người đọc nhấp vào liên kết, họ sẽ được đưa thẳng đến phần đó.

Những lợi ích của việc sử dụng mục lục bài viết

Trong thời đại số hóa hiện nay, việc tạo ra nội dung chất lượng và dễ tiếp cận là vô cùng quan trọng. Một trong những công cụ hữu ích giúp cải thiện trải nghiệm người đọc chính là mục lục bài viết. Dưới đây là những lợi ích nổi bật của việc sử dụng mục lục:

• Tăng tính tổ chức và dễ đọc: Mục lục giúp bài viết trở nên có cấu trúc rõ ràng, dễ theo dõi. Người đọc có thể nhanh chóng nắm bắt được nội dung chính và các phần quan trọng mà không cần phải đọc toàn bộ bài viết. Điều này đặc biệt hữu ích đối với những bài viết dài hoặc có nhiều phần.
• Cải thiện trải nghiệm người dùng: Khi người đọc có thể dễ dàng tìm thấy thông tin họ cần, họ sẽ cảm thấy hài lòng hơn với trải nghiệm đọc. Mục lục giúp tiết kiệm thời gian và công sức của người đọc, từ đó tăng khả năng họ sẽ quay lại trang web của bạn trong tương lai.
• Tăng khả năng SEO: Các công cụ tìm kiếm như Google đánh giá cao những bài viết có cấu trúc rõ ràng và dễ đọc. Việc sử dụng mục lục không chỉ giúp người đọc mà còn giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung của bạn, từ đó cải thiện thứ hạng SEO của trang web.
• Hỗ trợ điều hướng nội dung: Mục lục cho phép người đọc dễ dàng chuyển đến các phần khác nhau của bài viết chỉ với một cú nhấp chuột. Điều này đặc biệt hữu ích đối với những bài viết dài hoặc có nhiều chủ đề phụ, giúp người đọc không bị lạc trong biển thông tin.
• Tạo ấn tượng chuyên nghiệp: Một bài viết có mục lục không chỉ giúp người đọc mà còn tạo ấn tượng về sự chuyên nghiệp và chu đáo của người viết. Điều này có thể làm tăng uy tín và sự tin tưởng của người đọc đối với nội dung của bạn.

Cách tạo mục lục bài viết tự động

Bước 1: copy CSS bên dưới dán trước thẻ đóng ]]></b:skin>

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: copy JS bên dưới dán trước thẻ đóng </body>

<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: soạn thảo bài viết bình thường
Muốn làm tiêu đề cho mục lục thì chọn các thẻ H1, H2, H3, H4 cho tiêu đề đó

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

Bước 4: tạo mục lục cho bài viết
Chèn đoạn {tocify} $title = {Mục lục bài viết} vào vị trí bạn muốn xuất hiện phần mục lục tự động trong bài viết (bắt buộc in đậm {tocify} $title = {Mục lục bài viết} bạn nhé).

Kết luận

Mục lục bài viết tự động có thể có tác động đáng kể đến sự thành công của blog của bạn. Bằng cách cải thiện điều hướng, trải nghiệm người dùng, SEO hiệu quả, đây là công cụ mà mọi blogger nên cân nhắc sử dụng. Vậy tại sao bạn không thử áp dụng nó vào bài viết tiếp theo của mình? Độc giả của bạn và công cụ tìm kiếm sẽ cảm ơn bạn.