Nhatthienkt's Blog Thủ thuật hay

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

Nguyễn Nhật Thiên 23:36:00

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!

Copy bài viết vui lòng ghi Nguồn: NhatThienkt.net .

Đăng nhận xét

2 Nhận xét

  1. petcute22:35:00 GMT+7 24 tháng 7, 2019

    đây là bài viết duy nhất mà mik có thể áp dụng được, cảm ơn bạn. Chứ những bài thuộc top gg mik chẳng hiểu họ đang nói gì lun, k chi tiết như bạn

    Trả lờiXóa

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
- Nhận xét không hỗ trợ cho người dùng ẩn danh
- 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ỏ
- Bạn muốn theo dõi cập nhật trả lời sớm nhất từ adm vui lòng tick vào ô "Thông báo cho tôi" rồi xuất bản nhận xét của mình.

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)