Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp
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ẻ
<!-- #CODE ẨN/HIỆN MỤC LỤC -->
<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:
<div id="toc_container">
<b>MỤC LỤC: Nội dung bài viết</b> <span class="accordion active">[Ẩn/Hiện]</span>
<br />
<div class="panel show">
<ul class="toc_list">
<li><a href="#phan-1">Phần 1: abc</a></li>
<li><a href="#phan-2">Phần 2: abc</a></li>
<li><a href="#phan-3">Phần 3: abc</a></li>
<li><a href="#phan-4">Phần 4: abc</a></li>
<li><a href="#phan-5">Phần 5: abc</a></li>
</ul>
</div>
</div>
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>
Nội dung bài viết của phần 5 ở đây
Cập nhật sách full Group Cập nhật y khoa
Trả lờiXóahttps://loicapcuu.com/sach-hoan-thanh
https://yho.vn/loi-can-tranh-trong-cap-cuu/bai-1-dung-tin-khi-chi-dua-vao-kham-lam-sang-de-xac-nhan-vi-tri-cua-ong-noi-khi-quan.html
Trả lờiXóa