Cách tạo Table Of Content cho Blogger

byAdmin - 0

Cách tạo Table Of Content cho Blogger
Cách tạo Table Of Content cho Blogger

Trong nền tảng WordPress khi bạn muốn tạo Table Of Content 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. Để tạo Table Of Content Blogspot thì chúng ta phải làm nhiều bước hơn một chút, nhưng đổi lại cho ta kết quả một bảng Table Of Content như trên WordPress, dễ ràng sử dụng và vô cùng chuyên nghiệp.

Table Of Content là gì ?

Table of contents là một bảng mục lục, thường được viết tắt là TOC, là một danh sách, thường được tìm thấy trên trang trước khi bắt đầu một tác phẩm, là thuật ngữ hay sử dụng trong lĩnh vực kinh tế, và ngày nay Table Of Content nó hiện hữu ở mọi nơi, đồi với web / blogs thì nó hỗ trợ Seo rất nhiều.

Vị trí xuất hiện Table Of Content

  1. Mặc dịch thì Table Of Content cho Blogger sẽ xuất hiện ở cuối mỗi bài viết của chúng ta.
  2. Chúng ta có thể cài đặt tùy thích theo ý của mình, đối với blogger nếu bạn muốn Table Of Content hiển thị ở đâu thì bạn chỉ việc chèn dấu ngắt trang ở vị trí đó, thì nó sẽ hiển thị ở đó.

Cách thực hiện Table Of Content cho Blogger

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>
3. Sau khi chèn sẽ thành như sau :
<b:if cond='data:view.isPost'>
<div class='box_category'/>
</b:if> <data:post.body/> 
4. 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://welaxit.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>
5. 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 tiêu đề trong Table Of Content

Cách tạo Table Of Content cho Blogger

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

  1. Thêm trực tiếp bên khung soạn thảo bằng cách bôi đen nơi muốn tạo mục lục và trên thanh công cụ " Đoạn " các bạn chọn " Tiêu Đề " nhé !
  2. Các bạn chuyển sang chế dộ soạn thảo HTML và chỉ việc trèn thẻ <h2></h2> vào dòng bạn muốn nó hiển thị ở Table Contents thôi. 

Lưu ý quan trọng để tạo Table Of Content

  • 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/>
  • Còn Demo thì các bạn dang được xem tại bài viết này rồi nhé ! :D
Chúc thành công nhé ! 



" We share content only for testing purpose, not for commercial use. If you have money then we strongly recommend to buy it from original authors because they put really hard work in making it. They will be your best support. Use at your OWN RISK "

إرسال تعليق

Post a Comment (0)

أحدث أقدم