Tạo mục lục bài viết ẩn và hiện cho blogspot-blogger
Để Tạo mục lục bài viết ẩn và hiện cho blogspot/blogger Các bạn làm theo 3 bước sau nhé đảm bảo thành công 100%
 |
| 3 Bước Tạo mục lục bài viết ẩn và hiện cho blogspot-blogger |
Bước 1 : vào Mẫu -- Chỉnh sửa HTML --- <head> chèn code bên dưới trong thẻ này </head>
position:fixed;
right:0;
top:200px;
z-index:9999;
width:300px;
display:none;
text-align:right;
}
a.dropdown-list_button {
text-align:center;
text-decoration:none;
}
a.dropdown-list_button:hover {
text-decoration:none !important;
}
a.dropdown-list_button:before {
content:"\f03a";
font-family:fontawesome;
background:#fff;
color:#424242;
font-size:20px;
width:35px;
height:35px;
display:inline-block;
line-height:38px;
text-align:center;
border:1px solid #ddd;
}
.dropdown-list_menu {
display:none;
margin:0 !important;
padding:10px !important;
background:rgb(255,255,255);
border:1px solid #ddd;
text-align: left;
}
@media all and (max-width:600px) {
#dropdown-list {
display:none !important;
}
}
</style>
</b:if>Bước 2 : <head> thêm thư viện Jquery bên dưới nếu như blog của bạn chưa có trong thẻ này </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'type='text/javascript'/>
Bước 3 : <body> thêm Jquery bên dưới trong thẻ </body>
<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 = $(".dropdown-list_menu"),
pcbbutton = $(".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
$('#dropdown-list').fadeIn();
} else {
$('#dropdown-list').fadeOut();
}
});
//]]>
</script>
</b:if>
thay 1000 thành số bạn muốn hiện mục lục khi cuộn xuống theo đơn vị pixel
OK. vầy bạn đã làm xong bước thêm các thuộc tính cho mục lục bài viết:
Tiếp đó các bạn vào Bài đăng --- Bài đăng mới --- Chế độ xem HTML và làm theo mẫu sau :
<div id="dropdown-list"> <a class="dropdown-list_button" href="javascript:;"></a> <ul class="dropdown-list_menu"> <li><a href="#m1">Mục 1</a> </li> <li><a href="#m2">Mục 2</a> </li> <li><a href="#m3">Mục 3</a> </li> <li><a href="#m4">Mục 4</a> </li> </ul> </div>
OK. Sau đó các bạn xuất bản và xem thành quả nhé. Chúc các bạn thành công !!!!!
