Như đã chia sẻ với các bạn HƯỚNG DẪN CÁCH TẠO MỤC LỤC CHO BÀI VIẾT TRONG BLOGSPOT. Hôm nay mình lại chia sẻ thêm một cách nữa đó là tạo mục lục cuộn theo trang bài viết.
Bước 1:
<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:
<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;
padding:10px !important;
background:rgb(255,255,255);
border:1px solid #ddd;
text-align: left;
}
</style>
</b:if>
Bước 3:
>> Xem thêm: Hướng dẫn cách tạo mục lục cho bài viết trong blogger
Bước 4:
<div id="mucluc-dropdown-list">
<a class="mucluc-dropdown-list_button" href="javascript:;"></a>
<ul class="mucluc-dropdown-list_menu">
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost#sitemap-la-gi">1. Sitemap là gì? Tại sao nên tạo sitemap cho website?</a>
</li>
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost-tang-thu-hang">2. HTML Sitemap giúp tăng thứ hạng tìm kiếm cho website.</a>
</li>
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost#tao-sitemap">3. Hướng dẫn tạo HTML sitemap cho Blogger.</a>
</li>
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost#luu-y">4. Lưu ý quan trọng để bạn tạo sitemap html blogspot thành công.</a>
</li>
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost#tao-xml-blogpost">5. Cách tạo XML sitemap blogger.</a>
</li>
<li><a href="https://dinhcuvieclam.blogspot.com/huong-dan-tao-sitemap-html-va-xml-cho-blogpost#khai-bao-google-console">6. Khai báo sitemap blogger trong google console.</a>
</li>
</ul>
</div>
Đăng nhận xét