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

Publisher: Minh Khôi

tháng 4 21, 2020

Để 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


Copyright © 2019 - Goomsite.Net