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.
Cách tạo mục lục trong bài viết Blogspot
a. Đăng nhập vào Blogger.
b. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
c. Thêm mã CSS dưới đây vào trước thẻ </head>
<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>
d. Tiếp theo thêm mã bên dưới vào trước thẻ </body>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>
e. Tạo một bài đăng mới trong Blogger
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.
<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>
g. Thêm id theo thứ tự cho thẻ nội dung xem ví dụ
<h3 id="1"> Nội dung 1</h3>
<h3 id="1"> Nội dung 1</h3>
<h3 id="1"> Nội dung 1</h3>
h.Tiếp theo thêm mã này vào cuối mỗi đoạn cho từng nội dung
<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>
Rất đơn giản để hoàn thành bài đăng có mục lục trong bài viết blogger rồi. Nếu thấy hay hãy chia sẻ cho bạn bè cung biết nhé.
