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
Click 🖱➡️ 🔗️ Đi Tới Xưởng Xẻ Sấy, Mua Thớt Gỗ – Ván Ghép Giá Tốt? Gỗ Tràm Chất Lượng Xuất Khẩu.
☎ Liên Hệ Gọi Ngay: 0968 970 650
Website : Goghepthanh.com
Chúng Tôi Rất Hân Hạnh Được Phục Vụ Quý Khách!
Catalog : Thớt Gỗ - Ván Ghép - Gỗ Tràm Xẻ Sấy 📩 Bio Link → Gửi CV Kín - Job Tiếng Trung / 私密投递简历 🅱️-AutoMan Shop " Chạm Là Yêu ". Bài Viết Mới Nhất
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
Trà Xanh Thơm Mát
🌿 Trà Trái Cây Mát Lịm...

Nhìn Thôi Đã Thấy Thèm...
Vitamin Trái Cây, Thanh Lọc Cơ Thể Giải Nhiệt Tâm Trí.
👉 Khám phá ngay

--Ads--
👉 Thớt Gỗ Teak Giá Bao Nhiêu? Rẻ Hay Đắt ? Yếu Tố Nào Quyết Định ?
🔥 Hot Topics :
Gia Bảo