Chuyển đến nội dung chính

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp

Bài viết này sẽ hướng dẫn các bạn cách lập MỤC LỤC tại một bài viết trong website (Blogspot), nhằm tạo cho nội dung bài viết được rõ ràng cho người đọc và website trở nên chuyên nghiệp hơn...

Ví dụ MỤC LỤC trong bài viết:

Bước 1:

Đầu tiên là đoạn code CSS (làm đẹp đoạn mục lục): Mở code html của website Blogspot: Tìm nơi chèn, các bạn ấn Ctrl + F tìm ]]></b:skin> Copy chèn đoạn code CSS bên dưới vào trước ]]></b:skin>

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

Bước 2:

Copy đoạn code Javascript bên dưới và chèn vào sau thẻ <head> hoặc trước thẻ </body> (Ấn Ctrl + F để tìm nhanh đến code <head> hoặc </body>) hoặc trước thẻ

<!-- #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 3:

Khi tạo bài viết các bạn sử dụng ID để cho phép lập chỉ mục tìm đến nội dung theo mục lục ví dụ bên dưới:

<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 4:

Ở nội dung muốn chỉ mục đến được các bạn phải dùng thẻ H3 (Tiêu đề con) và thêm ID tương ứng như ví dụ code bên dưới:

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

Lời kết:

Việc lập mục lục cho website blogspot yêu cầu các bạn có một chút kiến thức HTML là có thể sử dụng đơn giản. Trong quá trình thực hiện hướng dẫn này nếu các bạn gặp vướng mắc vui lòng liên hệ mình sẽ hướng dẫn chi tiết hơn... Cảm ơn và chúc các bạn thành công!

Nhận xét

  1. Cập nhật sách full Group Cập nhật y khoa
    https://loicapcuu.com/sach-hoan-thanh

    Trả lờiXóa
  2. https://yho.vn/loi-can-tranh-trong-cap-cuu/bai-1-dung-tin-khi-chi-dua-vao-kham-lam-sang-de-xac-nhan-vi-tri-cua-ong-noi-khi-quan.html

    Trả lờiXóa

Đăng nhận xét

Bài đăng phổ biến từ blog này

Cas lâm sang PVC nhịp đôi

Cas lâm sàng này được 1 bạn là thành viên của Group CNKT y khoa nhờ giúp đỡ. Câu hỏi Bệnh nhân nữ 79 tuổi, tức vùng thượng vị lan lên cổ, HA: 60/40mmhg. Các bác xử trí sao ạ. Link Bài viết gốc tại Group Cập nhật kiến thức y Khoa Trả lời Những comment có giá trị. Theo Bs Phạm Minh : Bệnh nhân này check xem suy tim không, đang dùng thuốc gì. hình ảnh này gợi ý ngộ độc digoxin, Bệnh nhân có tiền sử bệnh tim 2 năm nay, lâu lâu lên cơn mệt, người đồng bào, không dùng thuốc gì ở nhà ạ!   Siêu âm tim Ef 32%. Huyết áp lúc mới nhập viện: 100/60 Cũng theo Bs Minh thì: nghĩ kali có giảm. 1 bù kali 2 cho mgs04 nếu là anh xử trí  Kali 3,7 mmol anh ạ! Em mới pha nor liều thấp và cho truyền dịch chậm. Hình ảnh xem tại D1. Chờ xét nghiệm men tim. Bs Minh tiếp tục truy vấn: dùng nor rồi e có nghĩ dùng gì để xóa PVC không ? Và phân tích tiếp: các nguyên nhân có thể gây PVC nhịp đôi: thiếu máu cục bộ sau nhồi máu cơ tim, ngộ độc digoxin, hạ kali, hạ magne, dùng chủ...

Rối loạn ý thức

RỐI LOẠN Ý THỨC Bệnh nhân rối loạn ý thức cần tiếp cận thông tin từ gia đinh, bạn bè, người qua đường, cảnh sát, xe cứu thương và hồ sơ y tế trước đây Các trường hợp hay gặp: Bệnh nhân lú lẫn Tiền sử nghiện rượu Bệnh nhân cai rượu. Bệnh nhân ngất hoặc bất tỉnh ở mục i p.24

Tạo Button Download đẹp từ CSS3 cho blogger

Tạo Button Download đẹp từ CSS3 cho blogger Thủ thuật này sẽ giúp bạn tạo một nút download đẹp cho blog. Điểm đặc biệt là nó không hề sử dụng hình ảnh nào, tất cả đều được viết từ ngôn ngữ thuần CSS3 khiến cho blog của bạn tải nhanh hơn so với những nút tải về sử dụng hình ảnh. Đồng thời nó được kết hợp với hiệu ứng hiện thông tin của link liên kết khi bạn dê chuột lên nút tải về. Bạn có thể xem demo ở hình ảnh bên cạnh hoặc link kết bên dưới Thủ thuật này đặc biệt thích hợp với những blog chuyên viết về phần mềm và chia sẻ các link liên kết, Áp dụng nó sẽ khiến blog của bạn dặc biệt hơn, nó tạo cho bạn có một phong cách riêng so với các blog/web khác. X EM  DEMO ☼ Tính khả dụng của button này: Button này hoạt động tốt trên các trình duyệt như:  FireFox 3.6 trở lên, Chrome, Safari 4+, Chrome10+, Safari5.1+, Opera 11.10+ *, IE6-9, IE10+, W3C . Bạn có thể thấy nút hoạt động tốt trên hầu hết những trình duyệt được sử dụng phổ biến nhất hiện nay phải không. Do vậy ...