Tạo mục lục cho Blogpsot

Trên nền tảng WordPress khi bạn muốn tạo một bảng mục lục cho bài viết thì bạn chỉ cần cài đặt plugin vào là xong. Còn với nền tảng blogspot thì không được dễ như vậy. Chúng ta phải làm nhiều bước hơn một chút tuy nhiên kết quả thì không thua kém WordPress đâu. Trong bài viết này, mình sẽ cố gắng trình bày thật chi tiết để các bạn có thể làm được. Mình tin rằng, sau khi thực hiện xong Blog bạn sẽ chuyên nghiệp hơn đấy. Nào cùng thực hiện thôi.

Một số chức năng :

• Bảng mục lục giúp người đọc dễ nắm bắt thông tin bài viết hơn.
• Các tiêu đề h1, h2, h3, h4...sẽ để điều hướng nhanh đến mục mà đọc giả cần đọc. 
• Khi bấm vào tiêu đề thì sẽ tự động về lại trang mục lục.

Vị trí xuất hiện của bảng mục lục

1. Mặc định mục lục sẽ xuất hiện đầu bài viết.
2. Mục lục sẽ xuất hiện sau dấu ngắt - của bài viết.  Ở cách thứ hai này bạn có thể điều chỉnh được vị trí của bảng mục lục nằm bất cứ đâu mà bạn muốn. Nghĩa là bảng mục lục sẽ xuất hiện tại vị trí đầu tiên mà bạn đặt dấu ngắt. Do đó, khi viết bài nếu muốn áp dụng cách này, bạn nên nhớ chèn dấu ngắt . Ngoài ra, một điều hữu ích của việc chèn dấu ngắt vào bài viết mà có lẽ nhiều bạn chưa biết. Đó là nó sẽ giúp cho bài viết của không bị người khác copy bằng các phần mềm.Vì khi đặt dấu ngắt càng nhiều thì phần mềm chỉ có thể copy đến đoạn ngắt mà không thể copy hết bài viết của các bạn. 

Cách thực hiện

1. Tìm thẻ <data:post.body/> (chỉ một thẻ) hoặc tìm <data:post.body>(có nhiều thẻ) trong template của bạn có thể có nhiều thẻ loại này nên các bạn cứ copy đoạn code bên dưới vào tât cả các thẻ này.
2. Chèn đoạn code bên dưới vào trước thẻ nội dung <data:post.body/>

<b:if cond='data:view.isPost'>
<div class='box_category'/>
</b:if>

Sau khi chèn sẽ thành như sau :

<b:if cond='data:view.isPost'>

<div class='box_category'/>

</b:if> <data:post.body/> 

3.Chèn đoạn code bên dưới vào trước thẻ <body/>

<b:if cond='data:view.isPost'>/*Tạo mục lục cho Blogspot by https://trucblogs.blogspot.com/*/<script>//<![CDATA[var postBody = document.querySelector('.post-body');var titleChapter = postBody.querySelectorAll('h2,h3,h4,h5,h6')if (1 <= titleChapter.length) {var i, leChapteraptor = []for (i = 0; i < titleChapter.length; i++) {anchorChapter = 'chapter-' + (i + 1)titleChapter[i].setAttribute('id', anchorChapter)titleChapter[i].setAttribute('title', 'Lên đầu trang')leChapteraptor[i] = '<li data-target=' + "#" + anchorChapter + '>' + titleChapter[i].innerHTML + '</li>'}$('.box_category').html('<p>Nội dung chính <label></label></p><ul class="chapter">' + leChapteraptor.join('') + '</ul>')} else {$('.box_category').remove()}$(function() {var name_more = $('.post-body a[name=more]')if (name_more) {$('.box_category').insertAfter(name_more)} else {$('.box_category').remove()}})$('.box_category p>label').click(function() {$(this).toggleClass('show');$(this).parent().parent().find('ul').slideToggle('slow')})$('.box_category li').bind('click', function() {var target = $(this).attr('data-target')$('html, body').stop().animate({scrollTop: ($(target).offset().top) - 70}, 'slow')})for (k = 0; k < titleChapter.length; k++) {titleChapter[k].addEventListener('click', function() {$('html, body').stop().animate({scrollTop: ($('.box_category').position().top)}, 'slow')})}//]]></script></b:if>

4.Chèn đoạn css sau vào trước thẻ: ]]></b:skin>. Nếu biết về CSS bạn có thể tùy chỉnh theo ý muốn

.box_category {

background-color: #f0f1f5;

margin-top: 22px;

padding: 15px;

border-left: 4px solid;

border-color: #4285f4;

}

.box_category p {

font-size: 1.3em;

text-align: center;

}

.box_category p>label:after {

content: '[Ẩn]';

}

.box_category p>label.show:after {

content: '[Hiện]';

}

.box_category ul {

margin: 10px 0 0;

padding: 0;

}

.box_category li {

list-style-type: none;

line-height: 1.8rem;

}

@media (min-width: 769px) {

.box_category p>label, .box_category li {

cursor: pointer;

}

}

Cách thêm thẻ tiêu đề

• Có 2 cách để thêm tiêu đề:

1.  Thêm trực tiếp bên khung soạn thảo bằng cách để con trỏ nhấp nháy, ngay trước hoặc sau hoặc bôi đen đoạn văn bản sau đó trên thanh công cụ soạn thảo click chọn ô Chuẩn => menu xổ xuống chọn một trong các loại Tiêu đề (h2), Tiêu đề con (h3), Tiêu đề nhỏ (h4)
2. Thêm bên khung soạn thảo HTML bài viết:

• Khi soạn bài viết, ở chế độ HTML, bạn thêm các thẻ headings h2, h3, h4, h5, h6.

• <h2>Tiêu đề </h2>
• <h3>Tiêu đề phụ</h3>
• <h4>Tiêu đề nhỏ</h4>
• <h5>Bình thường</h4>

• Trên đây là tất cả các bước để tạo phần mục lục cho bài viết.Mình đã cố gắng trình bày một cách rất chi tiết để bạn nào cũng có thể thực hiện được. Các bạn nên đọc kĩ và thực hiện từng bước một thì sẽ làm được thôi.
• Một lưu ý cuối, template của các bạn phải có có thư viện jquery để tiện ích hoạt động nhé.Nếu chưa có thì chèn vào nhé. 

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> <script type='text/javascript'>

• Nhớ đặt đoạn code trên trước thẻ </head> hoặc <head/>

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