Hôm nay mình lại chia sẻ thêm một cách nữa để tạo mục lục cho bài viết trong Blogger/Blogspot đó là dạng mục lục Ẩn/Hiện hay còn gọi là mục lục có thể thu gọn.
Tham Khảo 2 cách mình đã chia sẻ trước đó:
Thủ thuật này còn gọi là mục lục tự động vì nó tự bắt các thẻ <h> trong bài viết để tạo ra mục lục. Khác với 2 bài tham khảo ở trên.
Và bây giờ chúng ta bắt đầu cách này nhé.
***Lưu ý: Đối với một số bạn không hiểu nhiều về code vui lòng lưu lại Template trước khi chỉnh sửa bất cứ gì trong HTML nhé.😊
- Các bạn làm tuần tự theo các bước sau:
Bước 1:
- Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML tìm đến thẻ đóng
</head> và dán đoạn javascript sau đây vào trước nó.<script type='text/javascript'>
//<![CDATA[
//*************ntlruby.com
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[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:
- Cũng tại phần chỉnh sửa HTML các bạn tìm đến thẻ
]]></b:skin> vàdán đoạn CSS bên dưới vào trước nó..mbtTOC{
border:5px solid #006bff;
box-shadow:1px 1px 0 #9b97f1;
background-color:#9ab6ef;
color:#151515;
line-height:1.4em;
margin:30px auto;
padding:0px;
font-family:oswald, arial;
display: block;
width: 70%;
}
.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:#9ab6ef;
font-family:oswald, arial;
font-size:20px;position:relative;
outline:none;
cursor:pointer;
border:none;
color:#151515;
padding:0 0 0 15px;
}
.mbtTOC button:after{
content: " [ẩn/hiện]";
color:#b50408;
left:10px;
font-size:15px;
}
Bước 3:
- Cũng tại phần chỉnh sửa HTML các bạn tìm và thay tất cả các đoạn
<data:post.body/> thành <div id='post-toc'><data:post.body/></div> sau đó lưu lại Template.***Các bạn cơ thể sử dụng tổ hợp phím Ctrl + Shift + R thay vì Ctrl + F để tìm và thay 1 lần.
Bước 4:
- Các bạn vào phần bài đăng tạo 1 bài viết mới hoặc chỉnh sửa bài viết muốn tạo mục lục. Việc của các bạn
lúc này là hãy dán đoạn mã bên dưới vào bài đăng của mình tại nơi các bạn muốn
đặt mục lục.
<div class="mbtTOC">
<button onclick="mbtToggle()">Mục Lục: Bài viết gồm các phần</button>
<ol id="mbtTOC"></ol>
</div>
Bước 5:
- Cuối cùng các bạn dán đoạn code sau đây vào cuối bài đăng nữa là xong.
<script>mbtTOC();</script>
Các bạn xem qua video mình làm chậm từng bước để dễ thực hành hơn nhé!
Chúc các bạn thành công!
Facebook