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ụ
|
1 2 3 |
<h3 id="1"> Nội dung 1</h3> <h3 id="2"> Nội dung 2</h3> <h3 id="3"> Nội dung 3</h3> |
6. Tiếp theo thêm mã này vào cuối mỗi đoạn cho từng nội dung
|
1 |
<div class="back_muclucontent" onclick="document.getElementById('mucluc_list').scrollIntoView(true);" role="button" tabindex="0"> Trở lại mục lục bài viết</div> |
Ví dụ cho nội dung 1
<h3 id=”1″> Nội dung 1</h3> Sanai Blogger Template đi kèm với một thiết kế phù hợp với lý tưởng cho blog của bạn. Thiết kế của nó rất đơn giản để sử dụng và có thể gần như hoàn hảo để bắt đầu với mẫu tạp chí, hoặc thiết kế một số mẫu danh mục đầu tư khác.
<div class=”back_muclucontent” onclick=”document.getElementById(‘mucluc_list’).scrollIntoView(true);” role=”button” tabindex=”0″>Trở lại mục lục bài viết</div>
Vậy là đã hoàn tất, Bây giờ hãy Xuất bản bài đăng và xem kết quả trên blog của bạn