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.
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
#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("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } </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- Để 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"
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
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 2Ví 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

2 Nhận xét
đâ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óaCảm ơn bạn đã ghé thăm và phản hồi tốt đẹp.
XóaVui lòng viết comment Tiếng Việt có dấu.
Emoji- 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.