Tạo mục lục tự động ẩn hiện cho bài viết (Create Automatic Table Of Contents)
Bước 1. Copy đoạn code sau đặt trước thẻ ]]></b:skin> và lưu lại kiểm tra có bị lỗi hay không. Chắc chắn đoạn code mình đưa sẽ ok vì đã test rồi.
/* TOC */
.table-of-contents{border:3px solid #0B610B;flex:auto;width:fit-content;background:#eee;font-size:18px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color: #0B610B;font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliZTaR.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents
h4:after{font-family:FontAwesome;content:"\f0c9";padding-left:7px;}Bước 2. Sau khi xong bước 1 các bạn tiếp tục copy đoạn code sau đặt trước thẻ </body>
<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>Bước 3. Sau đó bạn đến bài đăng của mình trong chế độ HTML và dán đoạn code trước thẻ <h2> hoặc bất kì vị trí nào mà không có khoảng trắng:
<div class='toc-pro'></div>Vi du:
<div class='toc-pro'>
<h2 style="text-align: left;">
1. Tin học là gì?
</div>
