Tạo mục lục cho Blogpsot

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

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

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

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>