Xem thêm >>> Cách tạo mục lục thu gọn cho bài viết Blogspot |
Bước 1: thêm javascript
</body> và dán đoạn javascript sau đây vào trước nó.<b:if cond='data:blog.pageType ==
"item"'>
<script type='text/javascript'>
//<![CDATA[
// Hiện mục lục khi click vào button
var pcbcontainer =
$(".mucluc-dropdown-list_menu"),
pcbbutton = $(".mucluc-dropdown-list_button");
$(function() {
pcbbutton.click(function() {
if (pcbcontainer.is(":hidden")) {
pcbcontainer.slideDown(200);
} else {
pcbcontainer.fadeOut(200);
}
});
});
$(document).mouseup(function(e) {
if (!pcbcontainer.is(e.target) &&
pcbcontainer.has(e.target).length === 0) {
pcbcontainer.fadeOut(200);
}
});
// Kéo xuống 1000px sẽ hiện button show mục lục
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 1000) { // Thay 1000 bằng khoảng cách tính từ
trên xuống, đơn vị pixel
$('#mucluc-dropdown-list').fadeIn();
} else {
$('#mucluc-dropdown-list').fadeOut();
}
});
//]]>
</script>
</b:if>
Bước 2: thêm CSS
</head><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType ==
"item"'>
<style>
#mucluc-dropdown-list {
position:fixed;
left:0;
top:200px;
z-index:999999;
width:350px;
display:none;
text-align:left;
}
a.mucluc-dropdown-list_button {
text-align:left;
text-decoration:none;
}
a.mucluc-dropdown-list_button:hover {
text-decoration:none !important;
}
a.mucluc-dropdown-list_button:before {
content:"\f03a";
font-family:fontawesome;
background:#fff;
color:#3cc091;
font-size:20px;
width:35px;
height:35px;
display:inline-block;
line-height:38px;
text-align:center;
border:1px solid #ddd;
}
.mucluc-dropdown-list_menu {
display:none;
margin:5 !important;
background:#f5f5f5;
border:3px solid #ddd;
text-align: left;
}
</style>
</b:if>
Bước 3: thêm thư viện jquery
jquery chưa. Nếu đã có thì bỏ qua bước này, còn nếu chưa có thì dán thêm vào trước thẻ </head> nhé. Sau đó lưu lại.Bước 4: Gọi tên đầu mục
<a name="buoc1"></a>, <a name="buoc2"></a>,.... Các bạn có thể tìm hiểu chi tiết hơn ở bài Cách tạo Mục Lục cho bài viết trong Blogger đơn giản nhất.Bước 5: thêm mục lục vào vài đăng
<div
id="mucluc-dropdown-list">
<a
class="mucluc-dropdown-list_button"
href="javascript:;"></a>
<ul class="mucluc-dropdown-list_menu">Mục lục bài viết:
<li><a href="#buoc1">Tư thế ngủ khi bị đau cổ:</a>
</li>
<li><a href="#buoc2">Tư thế ngủ khi bị đau vai:</a>
</li>
<li><a href="#buoc3">Tư thế ngủ khi bị đau lưng:</a>
</li>
<li><a href="#buoc4">Tư thế ngủ khi bị đau hông:</a>
</li>
<li><a href="#buoc5">Tư thế ngủ khi bị đau đầu:</a>
</li>
</ul>
</div>
Facebook