Cách tạo mục lục ẩn/hiện (mục lục thu gọn) cho bài viết Blogger/Blogspot - NTLRUBY -->
Cách tạo mục lục ẩn/hiện (mục lục thu gọn) cho bài viết Blogger/Blogspot Cách tạo mục lục ẩn/hiện (mục lục thu gọn) cho bài viết Blogger/Blogspot
  • Cách tạo mục lục ẩn/hiện (mục lục thu gọn) cho bài viết Blogger/Blogspot

    Hôm nay mình lại chia sẻ thêm một cách nữa để tạo mục lục cho bài viết trong Blogger/Blogspot đó là dạng mục lục Ẩn/Hiện hay còn gọi là mục lục có thể thu gọn.

    Cách tạo mục lục thu gọn
    Tham  Khảo 2 cách mình đã chia sẻ trước đó:

    Thủ thuật này còn gọi là mục lục tự động vì nó tự bắt các thẻ <h> trong bài viết để tạo ra mục lục. Khác với 2 bài tham khảo ở trên.

    Và bây giờ chúng ta bắt đầu cách này nhé.

    - Các bạn có thể xem 👉 

    ***Lưu ý: Đối với một số bạn không hiểu nhiều về code vui lòng lưu lại Template trước khi chỉnh sửa bất cứ gì trong HTML nhé.😊 
    - Các bạn làm tuần tự theo các bước sau:

    Bước 1:

    - Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML tìm đến thẻ đóng </head> và dán đoạn javascript sau đây vào trước nó.
    <script type='text/javascript'>
    //<![CDATA[
    //*************ntlruby.com
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
    headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
    {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
    //]]>
    </script>

    Bước 2:

    - Cũng tại phần chỉnh sửa HTML các bạn tìm đến thẻ ]]></b:skin> vàdán đoạn CSS bên dưới vào trước nó.
    .mbtTOC{
            border:5px solid #006bff;
            box-shadow:1px 1px 0 #9b97f1;
            background-color:#9ab6ef;
            color:#151515;
            line-height:1.4em;
            margin:30px auto;
            padding:0px;
            font-family:oswald, arial;
            display: block;
             width: 70%;
            } 
    .mbtTOC ol,.mbtTOC ul {
            margin:0;
            padding:0;
                          } 
      
    .mbtTOC ul {
            list-style:none;
               }   
       
    .mbtTOC ol li,.mbtTOC ul li {
            padding:15px 0 0;
            margin:0 0 0 30px;
            font-size:15px;
                                } 
              
    .mbtTOC a{
            color:#0080ff;
            text-decoration:none;
              } 
              
    .mbtTOC a:hover{
            text-decoration:underline; 
                  }
            
    .mbtTOC button{
            background:#9ab6ef;
            font-family:oswald, arial; 
            font-size:20px;position:relative; 
            outline:none;
            cursor:pointer; 
            border:none; 
            color:#151515;
            padding:0 0 0 15px;
                   }  
       
    .mbtTOC button:after{
            content: " [ẩn/hiện]"; 
            color:#b50408; 
            left:10px; 
            font-size:15px;
                        }

    Bước 3:

    - Cũng tại phần chỉnh sửa HTML các bạn tìm và thay tất cả các đoạn <data:post.body/> thành <div id='post-toc'><data:post.body/></div> sau đó lưu lại Template.
    ***Các bạn cơ thể sử dụng tổ hợp phím Ctrl + Shift + R thay vì  Ctrl + F để tìm và thay 1 lần.

    Bước 4:

    - Các bạn vào phần bài đăng tạo 1 bài viết mới hoặc chỉnh sửa bài viết muốn tạo mục lục. Việc của các bạn lúc này là hãy dán đoạn mã bên dưới vào bài đăng của mình tại nơi các bạn muốn đặt mục lục.
    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Mục Lục: Bài viết gồm các phần</button> 
        <ol id="mbtTOC"></ol> 
    </div>

    Bước 5:

    - Cuối cùng các bạn dán đoạn code sau đây vào cuối bài đăng nữa là xong.

    <script>mbtTOC();</script>

    Lưu lại và xem kết quả.

    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!
  • Bài Viết Liên Quan

    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!

    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!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!