Tạo Mục Lục Cho Blogspot có đơn giản không? Làm Sao để Tạo được Mục Lục? Điều tưởng Như không Thể Của blogspot?
Với các anh em sử dụng Wordpress thì vui rồi vì Tạo Mục Lục cho wordpress hoàn toàn đơn giản bạn , bạn có thể tham khảo tại đâyDemo Mục Lục :
Nhưng để tạo Mục Lục cho Blogspot thì không phải ai cũng biết, và cũng không phải quá khó để làm điều đó. Chỉ hơi mất thời gian một chút xíu thôi nhưng nó sẽ làm bài viết của bạn trông chuyên nghiệp hơn đấy. Nào cùng bắt đầu thôi !!
1. Tạo khung cho Mục Lục
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;}
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
hãy 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- tức là khi viết bạn hãy bôi đen đoạn văn bạn và chọn tiêu đề con ( h3) sau đó chuyển sang html và thêm theo dạng id 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 2
ví dụ ( nhớ bấm ctrl+F để tìm h3 cho nhanh nha ) :
<h3 id="1"> 1. Tên Miền Là gì</h3> <h3 id="2"> 2. Đăng Ký Tên Miền Miễn Phí Bằng .do.tk</h3> <h3 id="3"> 3. Cài Đặt Tên Miền Miễn Phí Vào Blogspot</h3> <h3 id="4"> 4. Trỏ tên miền vào blogspot Tạo các bản ghi A</h3> <h3 id="5"> 5. Tổng Quát</h3>
4. Chọn vị trí phù hợp để thêm mục lục được tạo
sau khi chọn được chỗ thích hợp ( bên html thường nằm ở đầu bài ) thì thêm đoạn code này vào
code:
P/S: Đôi Lúc bạn sẽ gặp một số lỗi sau khi xuất bản như thế này ( bấm vào mục lục thì nó bắt đăng nhập blogger )
Cái này hoàn toàn đơn giản bạn chỉ cần xóa đoạn này đi, và để nguyên html để xuất bản là sẽ không hiện lỗi nữa.
Vậy là xong, Lưu ý là khi xuất bản bài viết nó mới hiện khung mục lục nha. Nếu có gì thắc mắc hoặc không hiểu hãy comment , mình sẽ làm một video để giải thích rõ hơn.
code:
<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ên Miền Là gì</a></li> <li><a href="#2"> 2. Đăng Ký Tên Miền Miễn Phí Bằng .do.tk</a></li> <li><a href="#3"> 3. Cài Đặt Tên Miền Miễn Phí Vào Blogspot</a></li> <li><a href="#4"> 4. Trỏ tên miền vào blogspot Tạo các bản ghi A</a></li> </ul> </div> </div>
P/S: Đôi Lúc bạn sẽ gặp một số lỗi sau khi xuất bản như thế này ( bấm vào mục lục thì nó bắt đăng nhập blogger )
Cái này hoàn toàn đơn giản bạn chỉ cần xóa đoạn này đi, và để nguyên html để xuất bản là sẽ không hiện lỗi nữa.
Vậy là xong, Lưu ý là khi xuất bản bài viết nó mới hiện khung mục lục nha. Nếu có gì thắc mắc hoặc không hiểu hãy comment , mình sẽ làm một video để giải thích rõ hơn.
bài viết rất hữu ích , thank bạn
Trả lờiXóa