Tạo mục lục ẩn hiện khi cuộn trang cho bài viết trong blogspot

Trước đây, nếu như bạn nào đã từng dùng hoặc xem qua các website làm trên nền tảng Wordpress thì chắc hẳn nhìn thấy trong mỗi bài viết của họ có thêm phần mục lục đúng không và khi nào kéo xuống sẽ còn có cả một button để click vào sẽ hiện ra mục lục đó.

Mục lục giúp cho người đọc có thể dễ dàng theo dõi và tóm lược được toàn bộ nội dung, những mục chính của bài viết đó. Chính vì vậy, việc tích hợp mục lục vào mỗi bài viết khá là hay. Tuy nhiên, hiện nay Blogspot chưa có phép ta làm theo kiểu "mì ăn liền" mà chỉ có thể chèn thủ công được thôi, tức là phải chèn code hiển thị mục lục ở mỗi bài viết bằng tay ấy, sẽ tốn thêm chút ít thời gian thôi. Và hôm nay, mình sẽ hướng dẫn các bạn cách để tạo mục lục ẩn hiện khi cuộn trang cho bài viết nhé. Thủ thuật rất có ích với các bài viết có nhiều mục chính, giờ thì bắt tay vào làm thôi.

Show/hide menu when scrolling for posts in blogspot

Mục lục

Khái quát lợi ích mục lục
Các bước thực hiện
Hướng dẫn sử dụng
Lời kết

Demo thủ thuật này chính là mục lục khi cuộn xuống 1 khoảng (có button bên phải để click) tại bài viết này và các bài viết từ giờ của blog mình nhé. Thủ thuật lần này có áp dụng code của bài Tạo nội dung dạng xổ xuống đơn giản bằng jquery mà mình đã hướng dẫn các bạn trước đó.

Các bước thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Chèn CSS dưới đây trước thẻ

</head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
  #dropdown-list {
  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 3: Thêm thư viện Jquery nếu như blog của bạn chưa có trước

</head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

Bước 4: Chèn đoạn Jquery sau trước thẻ

</body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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.
Nếu như bạn nào muốn thêm hiệu ứng trượt như blog mình thì dùng thêm code bên bài Tạo hiệu ứng cuộn mượt bằng jquery (smooth scrolling) nhé.
Bước 5: Lưu template lại.

Hướng dẫn sử dụng

Truy cập blogger.com - Bài đăng - Bài đăng mới. Tại đây, bài viết gồm 2 tab Viết và HTML, bạn vẫn sẽ viết bài như bình thường, sau đó chuyển qua tab HTML và chèn code hiển thị mục lục dưới đây vào vị trí bạn muốn. Vì mình đã để

position: fixed

nên bạn để code này cuối bài cũng được.

<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>

Cách dùng và đặt chỉ mục trong mục lục sao cho đúng thì bạn hãy tham khảo phần Cấu trúc trong bài này nhé.

Lời kết

Blogspot/Blogger là một nền tảng miễn phí của Google. Đối với blogspot, việc tích hợp nhiều chức năng nó vẫn còn khá thủ công và tỉ mỉ thì mới đẹp và khoa học được nhưng mình nghĩ rằng không gì là không thể nên bài của mình viết cũng chỉ là cơ bản thôi. Sau bài này, bạn nào có khả năng vẫn có thể phát triển hơn để hoàn hảo hơn. Xin chúc cho các bạn thành công và hãy chia sẻ bài viết nếu bạn cảm thấy nó có ích nhé.

Tags: #menu, #smooth scrolling, #blogspot, #dropdown