Cách Tạo Mục Lục Cuộn Theo Trang Bài Viết Blogspot - NTLRUBY

Có thể bạn quan tâm

Cách tạo mục lục cuộn theo trang bài viết Blogspot Cách tạo mục lục cuộn theo trang bài viết Blogspot

Trang Chủ / ✅ / Cách tạo mục lục cuộn theo trang bài viết Blogspot Cách tạo mục lục cuộn theo trang bài viết Blogspot - Như đã chia sẻ với các bạn cách để tạo mục lục cho bài viết Blogspot khá đơn giản. 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. - Mục lục cuộn theo trang bài viết tức là khi bạn cuôn trang xuống một khoản cách nhất định (ở đây là 1000px) thì mục lục sẽ hiện ra bên trái màng hình các bạn như hình dưới đây. - Các bạn có thể xem 👉 DEMO
Xem thêm >>> Cách tạo mục lục thu gọn cho bài viết Blogspot
Xem thêm >>> Cách tạo Mục Lục cho bài viết trong Blogger và thêm nút trở lại mục lục
- Tạo mục lục ngoài việc có thể giúp người xem dễ dàng nắm được nội dung bài viết còn khá tốt cho việc SEO. Mình sẽ không nói dong dài nữa nhé!😊 - Chúng ta bắt đầu và cách làm như sau:
Bước 1: thêm javascript
- Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML tìm đến thẻ đóng </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
- Cũng tại phần chỉnh sửa HTML các bạn tìm đến đầu trang và dán đoạn CSS bên dưới vào trước thẻ </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
- Các bạn kiểm tra xem blog mình đã có thư viện 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.<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Bước 4: Gọi tên đầu mục
- Qua phần bài đăng, các bạn viết bài mới hoặc chỉnh sửa bài cũ muốn tạo mục lục, chuyển sang chế độ HTML và tìm đến các thẻ <h> tiêu đề trong bài viết và đặt tên lần lượt cho từng thẻ một là <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
- Cuối cùng cũng tại phần HTML của bài đăng các bạn thêm đoạn code bên dưới vào nữa là xong.
<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>
***Lưu ý: - Nhớ thay các tên đầu mục của các bạn vào đầu mục mình tô đỏ ở code nhé.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! Cách tạo mục lục cuộn theo trang bài viết Blogspot NTLRUBY tháng 9 15, 2020 Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủ ✅ Blogger
NTLRUBY
Xin chào! Mình là Nguyễn Thành Long, mình tạo blog này như một không gian lưu trử tài liệu để tiện cho việc tìm lại sau này và chia sẻ chúng cho những ai cần đến. - Tất cả các bài trên blog một số mình tự viết và một số là copy từ nhiều nguồn trên internet (sẽ ghi rõ nguồn ở cuối bài đăng). - Thế nên: - Blog được xây dựng trên tinh thần chia sẻ và học hỏi. - Mong các bạn khi xem blog cũng trên tinh thần này và có thái độ văn minh lịch sự. Mình xin chân thành cảm ơn!

Có thể bạn thích:

Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

Facebook

Google

Zalo

Không có nhận xét nào :

Đăng nhận xét

Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

Đăng ký: Đăng Nhận xét ( Atom ) Không gửi mail làm phiền!Đăng ký theo dõi trên " Danh sách đọc" của Blogger.com: Đăng ký

Được Xem Nhiều Nhất

Hướng dẫn Kích hoạt Win 10 bằng Key CMD
HƯỚNG DẪN SỬ DỤNG PHẦN MỀM LÀM VIDEO PROSHOW PRODUCER
ĐÁNH GIÁ CHI TIẾT TÊN MIỀN NAMESILO
Tạo trang chuyển hướng khỏi Blog cho Blogspot
Code tạo form liên hệ đẹp cho blogspot
Cách thêm comment facebook cho từng bài viết riêng biệt trong blogspot
#5-Chụp Đối Tượng Bạn Muốn Bằng Chức Năng Tự Động Lấy Nét
Hiểu thế nào về nệm lò xo túi và lò xo liên kết?
Nệm Bông Ép
Những Bố Cục Đơn Giản nhưng Thiết Yếu (Phần 1): Quy Tắc Phần Ba & Quy Tắc Phần Tư