Thứ Hai, 16 tháng 9, 2019

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp

Posted By: chu hong phong 02:33 Leave a Reply

Bài viết này sẽ hướng dẫn các bạn cách lập MỤC LỤC tại một bài viết trong website (Blogspot), nhằm tạo cho nội dung bài viết được rõ ràng cho người đọc và website trở nên chuyên nghiệp hơn...

Ví dụ MỤC LỤC trong bài viết:

MỤC LỤC: Nội dung bài viết [Ẩn/Hiện]

Bước 1:

Đầu tiên là đoạn code CSS (làm đẹp đoạn mục lục): Mở code html của website Blogspot: Tìm nơi chèn, các bạn ấn Ctrl + F tìm ]]></b:skin> Copy chèn đoạn code CSS bên dưới vào trước ]]></b:skin>

/*=====================================
= CSS TẠO MỤC LỤC
=====================================*/
#toc_container{background: #edf6ff;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: #52b043;font-weight: 555;}#toc_container a:hover {color: #d7c20d;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 20px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Bước 2:

Copy đoạn code Javascript bên dưới và chèn vào sau thẻ <head> hoặc trước thẻ </body> (Ấn Ctrl + F để tìm nhanh đến code <head> hoặc </body>) hoặc trước thẻ

<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>

Bước 3:

Khi tạo bài viết các bạn sử dụng ID để cho phép lập chỉ mục tìm đến nội dung theo mục lục ví dụ bên dưới:

Bước 4:

Ở nội dung muốn chỉ mục đến được các bạn phải dùng thẻ H3 (Tiêu đề con) và thêm ID tương ứng như ví dụ code bên dưới:

<h3 id="phan-1"> 1. Nội dung Abc</h3>
Nội dung bài viết của phần 1 ở đây
<h3 id="phan-2"> 2. Nội dung Abc</h3>
Nội dung bài viết của phần 2 ở đây
<h3 id="phan-3"> 3. Nội dung Abc</h3>
Nội dung bài viết của phần 3 ở đây
<h3 id="phan-4"> 4. Nội dung Abc</h3>
Nội dung bài viết của phần 4 ở đây
<h3 id="phan-5"> 5. Nội dung Abc</h3>
sau cùng thì cũng tạo được danh mục nhưng khi nhấp vào và xuất hiện ví dụ phần 2 thì khi muốn quay lại danh mục chính thì các bạn tải lại trang để xuất hiện danh mục cũ nhé
sưu tầm từ trang http://www.nguyenthelinh.com