Tạo mục lục trong bài viết blogspot

Đăng bởiXuân Bách 2 Nhận xét

Để Tạo mục lục trong bài viết blogspot chúng ta làm trình tự như sau :


Mục Lục


1. CSS Tạo Khung


#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;}



Bạn copy đoạn CSS dưới đây và chèn vào trước thẻ ]]></b:skin> hoặc </style>

Bạn  tùy chỉnh cho phù hợp với độ rộng của trang web/blog của bạn

2. Javascript cho mục lục

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. Bắt đầu code tạo mục lục trong bài viết


<div id="toc_container">

<div class="panel show">

<ul class="toc_list">

<li><a href="#1"> 1. css tạo khung</a></li>

<li><a href="#2"> 2. javascript</a></li>

<li><a href="#3"> 3. Tạo mục lục trong bài viết blogspot</a></li>

</ul>

</div>

</div>

<!-- Các bạn viết nội dung ở đây nhé -->

<h3 id='1'> 1. Css tạo khung </h3>

//nội dung phần 1 các bạn nhập vào đây

<h3 id='2'> 2. javascript </h3>

//nội dung phần 2 các bạn nhập vào đây

<h3 id='3'> 3. Tạo mục lục </h3>

//nội dung phần 3 các bạn nhập vào đây


OK vậy là hoàn thiện cách Tạo mục lục trong bài viết blogspot các bạn xuất bản bài viết và trải nghiệm nhé ! web hay Chúc các bạn thành công


Chủ đề :

2 Nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

  1. Xuân BáchThứ Ba, 21 tháng 4, 2020

    Lưu ý code ở chế độ html kẻo chế độ href="#1,#2,#3" sẽ mất định dạng nhé. sai là không hiển thị được mục lục trong bài viết nha mọi người !

    Trả lờiXóa
  2. Xuân BáchThứ Ba, 21 tháng 4, 2020

    x-)

    Trả lờiXóa

Đăng nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn