Cách thêm Mục lục tự động cho bài viết Blogspot cực đẹp
Giới thiệu
Các bài viết chất lượng hiện nay thông thường sẽ bao gồm rất nhiều nội dung chuyên sâu vào một vấn đề chính để giúp người đọc có thêm nhiều thông tin hơn. Ngoài ra, nội dung chất lượng còn giúp Google đánh giá cao website của bạn vì chưa nhiều thông tin hữu ích. Bài viết quá dài cũng sẽ khiến cho người đọc bị rối và khó tìm nội dung mình mong muốn, vì thế chúng ta cần tạo mục lục cho bài viết (TOC - table of contents) để người dùng có thể biết nội dung bài viết bao gồm những gì và tiến đến phần cần đọc nhanh nhất.
 |
| Mục lục cho bài viết |
Mục lục này sẽ tự động bắt các thẻ h1 và sẽ không bắt các thẻ cao hơn (h2, h3,...) vì như thế trông rất rối mắt.
 |
| Demo của mục lục |
Những lợi ích của mục lục cho bài viết
Tạo mục lục cho bài viết (TOC) sẽ mang lại những lợi ích sau.
- Giúp bài viết trong gọn gàng, chuyên nghiệp hơn.
- Bài viết sẽ chuẩn SEO hơn khi các bot thu thập dữ liệu sẽ dễ dàng nắm rõ nội dung trong bài viết.
- Người đọc sẽ tìm nội dung mong muốn nhanh hơn.
- Dễ dàng quản lí nội dung.
- Cải thiện thời gian on-page.
- Giảm tỉ lệ bouncerate (thoát trang).
Hướng dẫn tạo mục lục tự động cho bài viết Blogspot
Tạo mục lục cho bài viết trong Blogspot rất đơn giản, các bạn hãy làm theo các bước dưới đây nhé.
Bước 1: Copy và paste đoạn mã sau vào phía dưới thẻ <head>.
Mẹo: dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé!.
<script type='text/javascript'> //<![CDATA[ //*************TOC plugin was customized by Giahuyblog.com function mbtTOC() { var mbtTOC = i = headlength = gethead = 0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length; for (i = 0; i < headlength; i++) { gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent; document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point" + i); mbtTOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>"; document.getElementById("mbtTOC").innerHTML += mbtTOC; } } function mbtToggle() { var mbt = document.getElementById('mbtTOC'); if (mbt.style.display === 'none') { mbt.style.display = 'block'; } else { mbt.style.display = 'none'; } } //]]> </script>Bước 2: Paste đoạn CSS sau vào trước thẻ đóng ]]></b:skin>.
/*####Automatic TOC was customized by Giahuyblog.com*/
.mbtTOC {
border: 3px solid #A2A9B1;
box-shadow: 1px 1px 0 #EDE396;
background-color: #F8F9FA;
color: #830000;
line-height: 1.4em;
margin: 30px auto;
padding: 20px 30px 20px 10px;
font-family: Open Sans, arial;
display: block;
width: 70%;
border-radius: 5px;
}
.mbtTOC ol,
.mbtTOC ul {
margin: 0;
padding: 0;
}
.mbtTOC ul {
list-style: none;
}
.mbtTOC ol li,
.mbtTOC ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.mbtTOC a {
color: #0080ff;
text-decoration: none;
}
.mbtTOC a:hover {
text-decoration: underline;
}
.mbtTOC button {
background: none;
font-family: Open Sans, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #3A3A3A;
padding: 0 0 0 15px;
}
<div id="post-toc"><data:post.body/></div>Một số template sẽ có nhiều thẻ <data:post.body/> nên hãy thay thế toàn bộ nhé!.
Sau khi đã chỉnh sửa rồi thì hãy lưu template lại.
Hướng dẫn sử dụng mục lục
Sau khi đã cài đặt hoàn tất rồi thì chúng ta sẽ sử dụng mục lục như sau.
Copy đoạn code này > đến phần chỉnh sửa HTML của bài viết bạn muốn thêm mục lục.
<div class="mbtTOC"> <button onclick="mbtToggle()">Mục lục</button> <ol id="mbtTOC"></ol> </div>Và copy đoạn code này paste xuống dưới cùng của phần chỉnh sửa HTML bài viết.
<script>mbtTOC();</script>Lưu bài viết lại là xong.
Tùy chỉnh mục lục theo ý muốn
Bạn có thể bỏ qua phần này cũng được.
Thay đổi màu sắc, phông chữ
Để thay đổi màu sắc và phông chữ, bạn chỉ cần tìm mã màu và phông chữ muốn chỉnh sửa trong đoạn CSS đã dán vào thẻ đóng ]]></b:skin.
Thay tên mục lục
Bạn có thể thay đổi tên mục lục trong đoạn code đã paste vào đầu phần HTML của bài viết.
Kết thúc bài viết
Việc tạo mục lục cho bài viết chỉ đơn giản như vật, nếu bạn có thắc mắc gì hãy bình luận bên dưới bài viết để mình hỗ trợ nhanh nhất. Cảm ơn bạn đã ghé thăm website.
Nhận xét
Đăng nhận xét