Cách tạo table content cho blogger

Cách tạo table content cho blogger

Lời nói đầu:

Đối với các web sử dụng nền tảng WordPress, việc tạo một bảng mục lục hay còn gọi là table content là rất đơn giản. Chỉ cần thêm một plugin nhỏ là được thôi. Tuy nhiên đối với các blogger, việc tạo một table content tương đối hơi khó một tý. Ở bài này mình sẽ hướng dẫn các bạn chỉ với 4 bước nhanh chóng sau, các bạn cũng có thể tạo cho mình một table cotent khá đẹp mắt nhưng cũng không kém phần mượt mà.

Demo:


Giải thích thêm một chút về table content: Trong bài viết các bạn sử dụng các thẻ tiêu đề h2, h3, h4...để điều hướng nhanh đến mục cần đọc. Điều này thực sự hữu ích đối với các bạn chuyên viết về blog truyện hay chia sẽ những nội dung thật dài mà cần phân ra các mục nhỏ hơn để độc giả tiện theo dõi,

Các bạn xem qua phần demo ở đây : Bài đăng có sử dụng table-content  hoặc có thể xem ngay tại chính bài đăng này cũng có mục table content cho cac bạn tham khảo xem trước

Vị trí xuất hiện của bảng mục lục thích hợp nhất chính là ngay tại dấu ngắt nhẩy. Lúc này khi viết bài cho blog các bạn nhớ chèn dấu ngắt nhầy vào nhé. Bảng mục lục sẽ hiện ra tự động luôn.

Các bước thực hiện theo 4 bước lần lượt như sau:

1. Chèn code html

Thêm đoạn code bên dưới thẻ dữ liệu nội dụng bài viết <data:post.body/>
<b:if cond='data:view.isPost'>
  <div class='box_category'/>
</b:if>

2. Chèn script trước thẻ đóng </body>

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

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

Có 2 cách:

+ 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)

+ Thêm bên khung soạn thảo HTML bài viết

Khi soạn hay chỉnh sửa bài viết, bên khung soạn thảo HTML của bài viết, thêm các thẻ h2, h3, h4, h5, h6.

<h2>Tiêu đề </h2>
<h3>Tiêu đề con</h3>
<h4>Tiêu đề nhỏ</h4>


Các bạn có thể thay bằng các thẻ headings h2, h3, h4, h5 hay h6 tùy các bạn

4. Viết css hiển thị

Phần viết css cho giao diện hiển thị của mục lục, các bạn tự thiết kế theo sở thích của mình, code css tham khảo đang áp dụng với trường hợp blog mình
.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ác bạn chép hết đoạn code bên trên rồi chèn trước thẻ ]]></b:skin> là xong

Đến đây là coi như bạn đã hoàn thành việc cài đặt phần mục lục cho bài viết của mình rồi nhé. Các bạn chỉ việc lưu lại và xem thành quả mình vừa làm có như ý không nhé. Chúc các bạn làm thành công nhé!


Nguồn: bietko.com

Copyright: BlogCuaTruc

Đăng nhận xét

Mới hơn Cũ hơn