Tạo mục lục bài viết (Table of Contents) blogspot 2017
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
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
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