Cách tạo mục lục tự động trên Blogger

Cách tạo mục lục tự động trên Blogger

Cách tạo mục lục tự động trên blogger - Nếu bạn là người dùng nền tảng WordPress, tất nhiên sẽ rất dễ dàng với sự trợ giúp của plugin để tạo mục lục trong bài viết. Người dùng nền tảng blogger không có một plugin, hãy cùng tìm hiểu cách tạo mục lục trên blogger. Trước khi tiếp tục phần hướng dẫn, chúng ta sẽ thảo luận về Mục lục .

{tocify} $title={Contents}

Mục lục là gì?

Mục lục từ một bài viết, mục đích là giúp người dùng dễ dàng chuyển đến phần của bài viết mà họ muốn đọc, vì vậy khi người dùng nhấp vào nội dung của mục lục, người dùng sẽ được chuyển hướng ngay lập tức đến phần họ muốn đọc.

Cách cài đặt mục lục tự động trên Blogger

• Bước 1: Đăng nhập vào tài khoản blogger
• Bước 2: Chọn Chủ đề => Chỉnh sửa HTML
• Bước 3: Sau đó sao chép CSS và Javascript sau và đặt nó trước mã </head> hoặc </body>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) {  // Only Shown If At least 2 Headings are Found for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Hide';
 
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Show';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

• Bước 4: Bạn gõ Ctrl + F để hiển thị thanh tìm kiếm và tìm kiếm mã <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Table of Contents [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div>

• Bước 5: Lưu lại

Làm thế nào để mục lục trong các bài viết trên Blog xuất hiện

Đoạn mã javascript trên sẽ tự động đọc thẻ tiêu đề h3 và h4 , sau đó sẽ trở thành mục lục. Để mục lục xuất hiện, hãy đảm bảo rằng bạn sử dụng subheading hoặc minor headings khi viết bài.

Lời kết

Đó là tất cả những điều mình chia sẻ về Cách tạo mục lục tự động trên Blogger. Nếu bạn có bất kỳ câu hỏi nào hay vấn đề bản quyền, hãy bình luận bên dưới. Mình hy vọng bài viết này hữu ích. 

Rate This Article

Thanks for reading: Cách tạo mục lục tự động trên Blogger, Stay tune to get latest Blogging Tips.