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
Lời kết:
Việc lập mục lục cho website blogspot yêu cầu các bạn có một chút kiến thức HTML là có thể sử dụng đơn giản. Trong quá trình thực hiện hướng dẫn này nếu các bạn gặp vướng mắc vui lòng liên hệ mình sẽ hướng dẫn chi tiết hơn... Cảm ơn và chúc các bạn thành công!
Thế Linh
Nhận cuộc sống tươi đẹp với http://alphalipidhaiphong.blogspot.com
Trả lờiXóatới phần thứ 3 là mik k hỉu bạn nói gì lun rùi, thêm gì và thêm ở đâu? bạn viết bài hướng dẫ kỹ hơn nhé!! Chúc bạn thành công
Trả lờiXóaViệc này bạn cần am hiểu một xíu cơ bản về HTML mới làm đc nha bạn
Xóalàm dc rồi mà chỉnh cái khung viền nhỏ lại mãi mà không được
Xóađoạn này border: size style color; để chỉnh viền đó ak
Xóakhi mình nhấp vào danh mục thì nó cũng nhảy đến vị trí cần đến nhưng mất luôn danh mục chẳng hiểu sao nữa
Trả lờiXóaGửi cho mình đoạn code làm nhé
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaEm hỏi một chút, làm cách nào để không hiện id trên đường dẫn URL, vì khi lập chỉ mục ở thẻ A thì khi click nó sẽ hiện ID lên đường dẫn, em muốn nó k hiện lên nhưng vẫn chạy đúng như lúc nó hiện, mong anh hướng dẫn
Trả lờiXóadùng bt mà bạn
Xóa