Thủ Thuật BlogSpot - Css Tạo Table Of Contents (TOC) Mục Lục Giúp Di Chuyển Nhanh Đến Nội Dung Trên Bài Viết.

Gia Bảo
Mục Lục Giúp Di Chuyển Nhanh Đến Nội Dung Trên Bài Viết hay còn được gọi là Table Of Contents (TOC) được rất nhiều blogspot sử dụng dùng chèn vào đầu bài viết, hoặc hiển thị dạng button sidebar cố định. Phần link liên kết chủ yếu dùng điều hướng tới các tiêu đề, nội dung bằng cách sử dụng link Neo ( <div name="tên-neo"> hoặc <div id="tên-neo" ).  Phần Table Of Contents có thể được sử dụng code tự động như trên template blogspot Median Ui. tuy nhiên Code thủ công để tạo Mục Lục trong Blogspot được ứng dụng nhiều hơn cả. Đối với nền tảng WordPress code Table Of Contents (TOC) chuyên nghiệp hơn, tự động hóa với cấu trúc sidebar ẩn hiện khi scroll chuột.
Hôm nay Gia Bảo xin chia sẻ Thủ Thuật BlogSpot sử dụng Css Tạo Table Of Contents (TOC) Mục Lục Giúp Di Chuyển Nhanh Đến Nội Dung Trên Bài Viết bằng cách thủ công vô cùng đẹp mắt. 
Css Tạo Table Of Contents (TOC) BlogSpot Số 1 :

     
 
<!--Thủ Thuật BlogSpot - Css Tạo Table Of Contents (TOC) Mục Lục Giúp Di Chuyển Nhanh Đến Nội Dung Trên Bài Viết. -->   
<style>
#toc{
background:#4098d7;background:linear-gradient(45deg,#724bb7 0,#4098d7 100%);
background-size:cover;color:#fff;
padding:0px;margin:0 -1rem 2rem}
#toc ol,#toc ul{margin-bottom:0}
#toc ol ol,#toc ol ul,#toc ul ol,#toc ul ul{margin:10px 0 10px}
#toc li{margin-bottom:10px}
#toc li a{color:inherit;text-decoration:none}
#toc li a:hover{border-bottom:1px dotted}
#toc li:last-child{margin-bottom:0}
@media screen and (min-width:45rem)
{#toc{padding:2rem;margin:0 -2rem 2rem}}
.link-white:link{color:#fff;text-decoration:none;font-size:18px}
.link-white:hover{color:#dcdcdc;text-decoration:underline solid #fff}
.link-white:visited{text-decoration:underline solid #fff;color:#fff}
#toc{background:linear-gradient(45deg,#ffc13e 0,#edab21 100%)}@media screen and (max-width:480px)  
</style>  

<div id="toc">  

<p style="border-bottom: 2px solid #F0F4F8;padding-bottom: 5px;font-size:1.5rem;padding-top:5px;padding-left:15px">
<strong>Mục Lục Blog Gia Bảo</strong>
</p>  
 
<div style="padding-left:15px">  
<a class="link-white" href="https://www.digitalnomad.vn/2021/06/tong-hop-html-css-javascript-du-kieu-chen-vao-blogspot-website-cua-banNhi687.html">
1.1 Html, Css, Javascript Thực chiến
</a>
</div>
 
<div style="padding-left:15px">  
<a class="link-white" href="https://www.digitalnomad.vn/2021/07/tong-hop-thu-thuat-code-web-giup-ban-thiet-ke-giao-dien-website-kiem-tien-dep-chuan-ui-uxBris526.html">
1.2 Web Ui UX
</a>
</div>

<div style="padding-left:15px">  
<a class="link-white" href="https://www.digitalnomad.vn/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogspot">
1.3 Thủ Thuật BlogSpot
</a>
</div>
 
<div style="padding-left:15px">  
<a class="link-white" href="https://www.digitalnomad.vn/search/label/Marketing">
1.4 Marketing
</a>
</div>

<div style="padding-bottom:25px">  
</div>
 
 
</div>

<!--End Thủ Thuật BlogSpot - Css Tạo Table Of Contents (TOC) Mục Lục Giúp Di Chuyển Nhanh Đến Nội Dung Trên Bài Viết. -->  

Code Css Mục Lục Mở Rộng :

Bạn chỉ cần Thay Css - Style màu Đỏ phía trên  với 1 trong số Css Style màu xanh sau đây tạo mẫu Mục Lục mói :

Mẫu BackGround màu xanh :

<!-- Mẫu BackGround màu xanh -->   
<style>
#toc{background:#4098d7;background:linear-gradient(45deg,#724bb7 0,#4098d7 100%);background-size:cover;color:#fff;padding:1rem;margin:0 -1rem 2rem}
#toc #table-of-contents{font-weight:600;border-bottom:0;padding-bottom:0}
#toc h2{padding-top:0}
#toc ol,#toc ul{margin-bottom:0}
#toc ol ol,#toc ol ul,#toc ul ol,#toc ul ul{margin:10px 0 10px}
#toc li{margin-bottom:10px}#toc li a{color:inherit;text-decoration:none}
#toc li a:hover{border-bottom:1px dotted}#toc li:last-child{margin-bottom:0}
.link-white:link{color:#fff;text-decoration:none;font-size:18px}
.link-white:hover{color:#dcdcdc;text-decoration:underline solid #fff}
.link-white:visited{text-decoration:underline solid #fff;color:#fff}
</style>
<!-- End Mẫu BackGround màu xanh --> 
 
Mẫu BackGround màu cam :

<!-- Mẫu BackGround màu cam --> 
<style>
#toc{background:linear-gradient(45deg,#ffc13e 0,#edab21 100%);background-size:cover;color:#fff;padding:1rem;margin:0 -1rem 2rem}
#toc #table-of-contents{font-weight:600;border-bottom:0;padding-bottom:0}
#toc h2{padding-top:0}
#toc ol,#toc ul{margin-bottom:0}
#toc ol ol,#toc ol ul,#toc ul ol,#toc ul ul{margin:10px 0 10px}
#toc li{margin-bottom:10px}#toc li a{color:inherit;text-decoration:none}
#toc li a:hover{border-bottom:1px dotted}#toc li:last-child{margin-bottom:0}
.link-white:link{color:#fff;text-decoration:none;font-size:18px}
.link-white:hover{color:#dcdcdc;text-decoration:underline solid #fff}
.link-white:visited{text-decoration:underline solid #fff;color:#fff}
</style>
<!-- End Mẫu BackGround màu cam --> 

Hiển Thị Css Tạo Table Of Contents (TOC) BlogSpot Số 1 :  

Css Tạo Table Of Contents (TOC) Đơn giản BlogSpot Mẫu Số 2 :

<!-- Tạo Mục Lục Đơn Giản --> 
<div style="border-radius: 4px; border: 1px solid gray; padding: 10px;">
<b>Mục Lục Điều Hướng Tới Trang Tĩnh Page Nổi Bật Trên  Blogspot : </b>
  <br>
 <ol>
 <li style="margin: 0px 0px 0.25em; padding: 0px;">
 <a href="https://www.digitalnomad.vn/p/tips.html" style="color: #2e91ee; text-decoration-line: none;" target="_blank">
Thủ Thuật, Mẹo Vặt 
   </a>
 </li>
  
 <li style="margin: 0px 0px 0.25em; padding: 0px;">
 <a href="https://www.digitalnomad.vn/p/list.html" style="color: #2e91ee; text-decoration-line: none;" target="_blank">
List danh sách Web 
   </a>
 </li>

  <li style="margin: 0px 0px 0.25em; padding: 0px;">
 <a href="https://www.digitalnomad.vn/p/knowledge-experience-skill.html" style="color: #2e91ee; text-decoration-line: none;" target="_blank">
Kiến Thức, Kinh Nghiệm, Kỹ Năng 
   </a>
 </li>
</ol>
</div> 
<!-- End Tạo Mục Lục Đơn Giản --> 

 

Hiển Thị Css Table Of Contents (TOC) Đơn giản BlogSpot Mẫu Số 2 :
Mục Lục Điều Hướng Tới Trang Tĩnh Page Nổi Bật Trên Blogspot :
  1. Thủ Thuật, Mẹo Vặt
  2. List danh sách Web
  3. Kiến Thức, Kinh Nghiệm, Kỹ Năng
Gia Bảo