ads Blog content marketing Digitalnomad.vn Hợp tác marketing

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 :
Bài Viết Ngẫu Nhiên

Bạn có thể thích những bài đăng này

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Xưởng sản xuất gỗ ghép cao su / gỗ ghép thông / thớt gỗ / xưởng may rèm cửa
Quảng cáo Ads2
Quảng cáo Ads3

1 Phút dành cho quảng cáo 2

NCC thớt gỗ, ván ghép, mdf
Tắt Ads

Xem Page Nhà Tài Trợ Click here

Tắt Ads

Máy Ép Chậm
Nồi chiên không dầu
Điện Thoại
LapTop Giá Rẻ
Máy xay sinh tố
1368.com.vn