Mục lục là một danh sách bao gồm các nội dung chính của chủ đề trong bài viết. Chúng ta có thể sử dụng mục lục để tóm tắt nội dung của bài viết dưới dạng liên kết giúp người đọc dễ dàng nắm bắt được nội dung của bài viết và lựa chọn chủ đề mà họ quan tâm nhất. Để tạo mục lục trong Bài viết Blogger mời các bạn tham khảo hướng dẫn dưới đây:
1 Đăng nhập vào Blogger.
2. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
3. Thêm mã CSS dưới đây vào trước thẻ </head>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style type="text/css"> /* CSS Table of Contents */ #light-mucluc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #mucluc_list{font-weight:700;cursor:pointer;margin:10px 0} #mucluc_list:focus,#mucluc li:focus,.back_muclucontent:focus{outline:none} #mucluc_list svg{vertical-align:middle} #mucluc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #mucluc ol li:before{left:-2em} #mucluc li a{color:#222} #mucluc li a:hover{color:#1e90ff} #mucluc{display:grid} .back_muclucontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_muclucontent:hover{background:#2d3436;color:#fff} :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden} </style> |
4. Tiếp theo chuyển sang chế độ soạn thảo HTML (ở trên cùng bên trái phần bài viết) copy mã bên dưới vào vị trí bạn muốn hiển trị mục lục trong bài viết.
1 2 3 4 5 6 7 8 9 10 11 |
<div id="light-mucluc"> <div id="mucluc_list" onclick="if (document.getElementById('mucluc').style.display === 'none') { document.getElementById('mucluc').style.display = 'block'; } else { document.getElementById('mucluc').style.display = 'none'; }" role="button" tabindex="0"> Mục lục <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div> <div id="mucluc"> <ol> <li><a href="#1" title="Ghi chú nội dung">Nội dung 1</a></li> <li><a href="#2" title="Ghi chú nội dung">Nội dung 2</a></li> <li><a href="#3" title="Ghi chú nội dung">Nội dung 3</a></li> </ol> </div> </div> |
5. Thêm id theo thứ tự cho thẻ nội dung xem ví dụ