Mục lục cho bài viết Blogspot thêm nút quay lại mục lục - NTLRUBY -->
Mục lục cho bài viết Blogspot thêm nút quay lại mục lục Mục lục cho bài viết Blogspot thêm nút quay lại mục lục
  • Mục lục cho bài viết Blogspot thêm nút quay lại mục lục

    Tiếp tục chuyên đề về mục lục cho bài biết Blogspot, trước đây mình đã chia sẻ 3 dạng mục lục cho bài viết Blogspot như:
       1. Cách tạo mục lục cho bài viết trong Blogger đơn giản nhất - Cách này hoàn toàn làm thủ công, không sử dụng gì đến CSS hay javascript.
       2. Cách tạo mục lục cuộn theo trang bài viết Blogspot - Kiểu này sẽ rất thuận tiện cho người xem khi bài viết quá dài, đọc đến đâu cũng có thể xem được mục lục. Tuy nó không được đẹp như plugin bên WordPress, nhưng nó cũng khá thuận tiện.
       3. 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 này còn gọi là mục lục tự động vì nó tự bắt các thẻ <h> tiêu đề trong bài viết để tạo ra mục lục, đở cực hơn cách 1 và 2.
    Mục lục cho bài viết Blogger
    Bài này mình chia sẻ thêm với các bạn một cách tạo mục lục cho bài viết trong Blogspot nữa. Cách này kiểu thì giống như cách 3 vì nó có thể thu gọn. Nhưng nó lại không tự động mà phải can thiệp vào các thẻ <h> tiêu đề trong vài viết. Và cách làm lần này sẽ thêm một thủ thuật nhỏ đó là tích thêm nút quay lại mục lục bài viết ở mỗi đoạn. Nếu bạn nào đã sử dụng cách 1 hoặc 3 vẫn có thể thêm nút quay lại này, mình cũng chia sẻ luôn ở dưới nhé. Cách 2 thì không cần rồi, vì nó đã cuộn theo trang bài viết rồi 😊.
    Không dong dài nữa, các bạn xem qua rồi chúng ta bắt đầu nhé.

    I - Mục lục cho bài viết Blogspot thêm nút quay lại mục lục:

    Bước 1: Thêm CSS

    Các bạn vào trang quản trị Blogger -> chỉnh sửa HTML thêm đoạn CSS dưới vào trước thẻ ]]></b:skin> và lưu lại.

    #light-mucluc{background-color:#f5f5f5;border:3px solid #999;padding:10px 20px}

    #mucluc_list{font-weight:700;cursor:pointer;margin:10px 0}

    #mucluc_list:focus,#mucluc li:focus,.back_muclucontent:focus{outline:none}

    #mucluc_list svg{vertical-align:middle}

    #mucluc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}

    #mucluc ol li:before{left:-2em}

    #mucluc li a{color:#222}

    #mucluc li a:hover{color:#1e90ff}

     

    #mucluc{display:grid}

    .back_muclucontent{z-index: 99999999;display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#0084ff;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}

    .back_muclucontent:hover{background:#2d3436;color:#fff}

    :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}

    Bước 2: Bài đăng

    Các bạn qua phần bài đăng viết bài mới hoặc vào chỉnh sử bài đăng cũ và thêm đoạn code bên dưới vào vị trí mình muốn đặt mục lục (thường là sau đoạn mở đầu của bài viết).

    <div id="light-mucluc">

    <div id="mucluc_list" onclick="if (document.getElementById('mucluc').style.display === 'none') { document.getElementById('mucluc').style.display = 'block'; } else { document.getElementById('mucluc').style.display = 'none'; }" role="button" tabindex="0">

    Nội dung bài viết gồm: <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>

    <div id="mucluc">

    <ol>

    <li><a href="#1" title="Thuế VAT là gì?"> Thuế VAT là gì?</a></li>

    <li><a href="#2" title="Khái niệm thuế giá trị gia tăng">Khái niệm thuế giá trị gia tăng </a></li>

    <li><a href="#3" title="Đối tượng chịu thuế GTGT là những ai?">Đối tượng chịu thuế GTGT là những ai? </a></li>

    <li><a href="#4" title="Thuế VAT bao nhiêu phần trăm (%)?">Thuế VAT bao nhiêu phần trăm (%)?</a></li>

    <li><a href="#5" title="Mặt hàng nào không chịu thuế giá trị gia tăng?">Mặt hàng nào không chịu thuế giá trị gia tăng?</a></li>

    <li><a href="#6" title="Hoàn thuế giá trị gia tăng">Hoàn thuế giá trị gia tăng</a></li>

    <li><a href="#7" title="Hoàn thuế giá trị gia tăng là gì?"> Hoàn thuế giá trị gia tăng là gì? </a></li>

    <li><a href="#8" title="Các trường hợp được hoàn thuế VAT">Các trường hợp được hoàn thuế VAT </a></li>

    <li><a href="#9" title="Điều kiện hoàn thuế GTGT">Điều kiện hoàn thuế GTGT </a></li>

    </ol>

    </div></div>
       - Trong đó các bạn nhớ thay các phần mình tô vàng thành các tiêu đề trong bài viết của các bạn nhé.

    Bước 3: Gọi tên

    Tương tự như cách đặt tên của cách 1. Các bạn tìm đến các đầu thẻ <h> và thêm vào cho nó id="1", id="2",... và cứ tuần tự cho đến hết các đầu mục tiêu đề của các bạn.
    Ví dụ: <h2 id="1"...............>Tiêu đề đầu của bài viết</h2>
               <h2 id="2"...............>Tiêu đề thứ 2 của bài viết</h2>
               ...

    Bước 4: Đặt nút quay trở lại mục lục

    (Nếu bài viết của các bạn không quá dài và không cần nút này thì có thể bỏ bước 4 này nhé)
    Cuối cùng tại các nơi mà các bạn cảm thấy bài viết đủ đủ dài và cần đặt nút thì các bạn thêm đoạn code dưới đây vào (theo mình các bạn đặt luôn ngay trên các thẻ <h> tiêu đề cho dễ 😊)

    <div class="back_muclucontent" onclick="document.getElementById('mucluc_list').scrollIntoView(true);" role="button" tabindex="0"> Trở lại mục lục bài viết</div>

    Như vậy là xong, các bạn lưu lại và ra xem kết quả nhé.

    II - Thêm nút quay lại mục lục cho cách 1 và 3:

    Nút này mình thay đổi style chút, không giống nút ở trên nhé :))

    Bước 1:

    Các bạn vào trang quản trị Blogger -> chỉnh sửa HTML thêm đoạn CSS dưới vào trước thẻ ]]></b:skin> và lưu lại.

    .back_mucluc_content {

      z-index: 99999999;

      float:right;

      background-color: #3578e5;

      border: none;

      color: #ffffff;

      cursor: pointer;

      display: inline-block;

      font-family: 'BenchNine', Arial, sans-serif;

      font-size: 0.5em;

      line-height: 1em;

      margin: 15px 40px;

      outline: none;

      padding: 10px 15px 8px;

      position: relative;

      text-transform: uppercase;

    }

     

    .back_mucluc_content:before,

    .back_mucluc_content:after {

      border-color: transparent;

      -webkit-transition: all 0.25s;

      transition: all 0.25s;

      border-style: solid;

      border-width: 0;

      content: "";

      height: 24px;

      position: absolute;

      width: 24px;

    }

     

    .back_mucluc_content:before {

      border-color: #3578e5;

      border-top-width: 2px;

      left: 0px;

      top: -5px;

    }

     

    .back_mucluc_content:after {

      border-bottom-width: 2px;

      border-color: #3578e5;

      bottom: -5px;

      right: 0px;

    }

     

    .back_mucluc_content:hover,

    .back_mucluc_content.hover {

      background-color: #3578e5;

    }

     

    .back_mucluc_content:hover:before,

    .back_mucluc_content.hover:before,

    .back_mucluc_content:hover:after,

    .back_mucluc_content.hover:after {

      height: 100%;

      width: 100%;

    }

    Bước 2:

    Các bạn vào chỉnh sửa bài viết có sử dụng mục lục, các bạn thêm đoạn code dưới vào ngay trên mục lục của các bạn.

    <div id="mucluc_list" onclick="if (document.getElementById('mucluc').style.display === 'none') { document.getElementById('mucluc').style.display = 'block'; } else { document.getElementById('mucluc').style.display = 'none'; }"></div>

    Bước 3:

    Tương tự bước 4 ở trên, các bạn thêm đoạn code dưới vào vị trí mong muốn.
    <div onclick="document.getElementById('mucluc_list').scrollIntoView(true);"><button class="back_mucluc_content">Trở lại mục lục bài viết</button></div>
    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é!