Tạo mục lục giúp di chuyển nhanh đến nội dung trong bài viết blogspot

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
XEM THÊM BÀI VIẾT SAU :

• Kết hợp quảng cáo dính cuối trang và tạo mục lục trong blogspot