Làm thế nào để Tạo Mục Lục Cho Blogspot?

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 đây

Demo Mục Lục : 


cach-tao-muc-luc

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(&quot;accordion&quot;);
var i;
for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle(&quot;active&quot;);
        this.nextElementSibling.classList.toggle(&quot;show&quot;);
  }
}
</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



muc-luc-cho-blogspot


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>



muc-luc-blogger

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: 


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


loi-khi-tao-muc-luc


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.


khac-phuc-loi-muc-luc


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. 






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?

Labels: ,
This is the most recent post.
Older Post

Post a Comment

chào bạn, mình sẽ vui cả ngày nếu bạn để lại cho mình một lời nhận xét, mình sẽ tiếp tục hơn nữa trong tương lai vì vậy hãy truyền cho mình chút sức mạnh nhé. Yêu bạn !!

[facebook] [blogger]

About Me

My photo
Vietnam
Chào mình là Petcute , tên thật là Ngọc Trần , phát triển website từ năm 2018 và mình nhất định sẽ cố gắng hơn nữa trong tương lai vì vậy hãy ủng hộ mình nhé

Author Name

Ngọc Trần

Contact Form

Name

Email *

Message *

Powered by Blogger.