Bước 1 : Chèn đoạn code CSS và đoạn Script bên dưới vào cuối  ]]></b:skin> :

<style>
/*=====================================
= 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;}
</style>

<!-- #CODE ẨN/HIỆN MỤC LỤC -->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Bước 2 : Kế đến chèn code sau vào vị trí cần hiển thị mục lục trong bài viết :

<div id="toc_container">
<b>MỤC LỤC: Nội dung bài viết</b>&nbsp; <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 3 : Tạo ID vị trí di chuyển tương ứng :

<div id="phan-1"> 1. Tiêu đề 1</div>
       Nội dung bài viết của phần 1 ở đây
<div id="phan-2"> 2. Tiêu đề 2</div>
       Nội dung bài viết của phần 2 ở đây
<div id="phan-3"> 3. Tiêu đề 3</div>
       Nội dung bài viết của phần 3 ở đây
<div id="phan-4"> 4. Tiêu đề 4</div>
       Nội dung bài viết của phần 4 ở đây
<div id="phan-5"> 5. Tiêu đề 1</div>


Xem thêm : 

Tạo Floating Banner Quảng cáo ẩn hiện trượt dọc theo website
https://iris-tips.blogspot.com/2015/09/tao-floating-banner-quang-cao-an-hien.html

Chèn quảng cáo vào blogspot ở các vị trí
https://mocgin.com/blogspot/chen-quang-cao-vao-blogspot-o-cac-vi-tri.html

Tạo quảng cáo sticky ở chân trang website giống AdSense Page
https://iris-tips.blogspot.com/2017/08/tao-quang-cao-sticky-o-chan-trang-giong-AdSense-Page-Level-Ads.html

Làm widget trượt giống quảng cáo Admicro cho blog và web
http://blogmoicuahung.blogspot.com/2015/09/lam-widget-truot-giong-quang-cao.html

Post a Comment

Mới hơn Cũ hơn

Xe máy điện Xmen GT Nijia 2018 thể thao năng động (Trắng phối xanh)
Đi tới nơi bán

Xe máy điện Terra Xmen Blade khung thép hợp kim (Xanh lá cây)
Đi tới nơi bán