Mục lục tự động cho blogspot

Mục lục bài viết trên website là những mục nội dung chính của bài mà bạn muốn chuyển tải tới cho độc giả, giúp độc giả dễ dàng hình dung cũng như tìm kiểm được nội dung họ đang quan tâm.

Vậy làm thế nào để tạo mục lục tự động cho blogpsot ngay sau dấu ngắt nháy?

Để tạo mục lục tự động cho blogspot các bạn thự hiện các bước dưới đây. Bạn vào chủ đề chỉnh sửa HTML và làm theo các bước bên dưới

Bước 1: Thêm HTML vào theme blogspot

Thêm đoạn code sau ngay sau dưới thẻ dữ liệu bài viết <data:post.body/>

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

Bước 2: Chèn javascript ngay phía trên thẻ đóng body

Vào theme blgospot tìm key </body> hoặc thẻ

<b:if cond='data:view.isPost'>
<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>

Bước 3: Thêm CSS vào theme blogspot

Vào themes blgospot của bạn tìm ]]></b:skin> thêm css sau ngay trên thẻ vừa tìm được

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

Bước 4: Hướng dẫn khi đăng bài để bài việt tự lấy mục lục tự động

Ba bước trên bạn đã thực hiện việc thêm code vào theme blogspot của các bạn. Bước tiếp theo bạn cần làm là vào viết bài xác định các mục tiêu đề chính

Mục tiêu để chính và chọn và kích vào phần đoạn trên thanh công cụ soạn thảo --> chọn tiêu đề hoặc tiêu đề phụ ( nếu là mục con của mục tiêu đề) ( để mục tiêu đề thành thẻ h2, h3)

Ngáy nháy bài viết bằng các để con chỏ chuột vào cuối đoạn text đầu tiên của bài viết và click vào dấu ngắt nháy trên thanh công cụ ( biểu tượng dầu ngạch ngang thứ 2 từ phải sang trái)