Lưu ý: Bạn hãy đọc thật kỹ bài viết trước khi thực hiện nhé ! Nếu như trong quá trình sử dụng bạn gặp bất cứ lỗi gì, ví dụ như bị lỗi link download, blog load chậm, hay là không truy cập vào được một trang nào đó... thì bạn vui lòng thông báo với mình tại đây nhé. Thanks !

Nhatthienkt.net - Mục lục trong bài viết giúp người đọc nắm bắt được bố cục khái quát chung của một bài viết, giúp người đọc chuyển đến một vị trí (mục) cần xem trong một bài viết chỉ bằng một nhấp chuột. Với blogspot chúng ta sẽ làm thủ công nhưng cũng không mất quá nhiều thời gian nếu bạn xác định được cấu trúc để tạo mục lục. Và trong bài viết này sẽ hướng dẫn bạn thực hiện ngay và thành công.

Đây là Demo

Tạo mục lục bài viết (Table of Contents) blogspot 2017

Các bước tiến hành tạo mục lục tự động.

1. CSS tạo khung 

Bạn copy đoạn CSS dưới đây và chèn vào trước thẻ ]]></b:skin>

#toc_container{background: #f9f9f9;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}
Bạn  tùy chỉnh cho phù hợp với độ rộng của trang web/blog của bạn

2. Javascript

Bạn copy đoạn Javascript  dưới đây và chèn vào sau thẻ <head> hoặc trước thẻ </body>

<script>
var acc = document.getElementsByClassName(&quot;accordion&quot;);
var i;
for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle(&quot;active&quot;);
        this.nextElementSibling.classList.toggle(&quot;show&quot;);
  }
}
</script>

3. Tạo mục lục trong bài viết blogspot

3.1. Sử dụng thẻ H3 (Tiêu đề con)

- Sử dụng tiêu đề con để phân thành từng mục để tạo mục lục
- Ví dụ: Bài viêt "Chia sẻ cách SEO blogspot 2017 cực dể và hiệu quả" mình có tạo 6 mục chính là tiêu đề con (thẻ H3) để làm viết rõ hơn cho từng nội dung.
1. Tổng quát
2. Tùy chỉnh Robots.txt
3. Tối ưu các file .js .css (JavaScript và CSS )
4. Tối ưu hình ảnh
5. Lách các nhà mạng chặn hiện thị hình ảnh
6. Tìm chọn và thiết kế theme blogspot chuẩn responsive
- Để tạo thẻ H3 các bạn chỉ việc chọn mục (để trỏ lên dòng văn bản đó hoặc bôi đen văn bản đó) và chọn "tiêu đề con"
Tạo mục lục bài viết (Table of Contents) blogspot 2017

3.2. Thêm ID cho từng mục của thẻ H3

Bạn bấm chế độ bài viết dạng HTML và tìm đến các thẻ H3 vừa tạo và tạo id theo cấu trúc sau
<h3 id="phan-1">Phần 1: abc</h3>
Nội dung phần 1
<h3 id="phan-2">Phần 2: xyz</h3>
Nội dung phần 2
Ví dụ:

<h3 id="1"> 1. Tổng quát</h3>
<h3 id="2"> 2. Tùy chỉnh Robots.txt</h3>
<h3 id="3"> 3. Tzi ưu các file .js .css (JavaScript và CSS )</h3>
<h3 id="4"> 4. Tối ưu hình ảnh</h3>
<h3 id="5"> 5. Lách các nhà mạng chặn hiện thị hình ảnh</h3>
<h3 id="6"> 6. Tìm chọn và thiết kế theme blogspot chuẩn responsive</h3>

3.3. Chọn vị trí phù hợp để chèn khung với mục lục được tạo

Bạn thay đổi id và nội dung phù hợp với bài viết của bạn.
<div id="toc_container">
Nội dung chính <span class="accordion active"></span>
<div class="panel show">
<ul class="toc_list">
<li><a href="#1"> 1. Tổng quát</a></li>
<li><a href="#2"> 2. Tùy chỉnh Robots.txt</a></li>
<li><a href="#3"> 3. Tối ưu các file .js .css (JavaScript và CSS)</a></li>
<li><a href="#4"> 4. Tối ưu hình ảnh</a></li>
<li><a href="#5"> 5. Lách các nhà mạng chặn hiện thị hình ảnh</a></li>
<li><a href="#6"> 6. Tìm chọn và thiết kế theme blogspot chuẩn responsive</a></li>
</ul>
</div>
</div>

Ví dụ chèn sau mục đầu tiên
Tạo mục lục bài viết (Table of Contents) blogspot 2017

3.4. Xuất bản bài viết

Vậy là xong, chúc các bạn thành công!
Điểm 4.6/5 dựa vào 87 đánh giá
- - 0 bình luận
http://www.nhatthienkt.net/2017/05/tao-muc-luc-bai-viet-table-of-contents-blogspot-2017.html
  • Google Comment (0)
  • Facebook Comment (0)
:)
:))
:D
=))
:(
:((
:o
^_^
^-^
/f
^.^
/g
;)
-_-
==
/r
-.-
:p
/o
/hi
/ok
/clap
(y)
(3)

Một số lưu ý khi bình luận

Vui lòng viết comment Tiếng Việt có dấu.

Bạn có thể gửi mail trực tiếp qua địa chỉ: nhatthienkt.s@gmail.com

Lưu ý những nhận xét với mục đích backlink không liên quan đến nội dung bài viết sẽ bị xóa bỏ