Tạo hiệu ứng thanh tiến trình khi đọc bài viết trên blogspot

Mở đầu

Hallo lại là Trung đây, hôm nay mình share cho mọi người cách tạo hiệu ứng thanh tiến trình khi đọc bài viết trên blogspot. Bạn có nhận thấy một số trang web hiển thị thanh tiến trình ở đầu bài viết của họ không? Thanh nhỏ này cho người dùng biết còn bao nhiêu phần của bài viết để cuộn và khuyến khích họ tiếp tục đọc.

Trong bài đăng này, chúng ta sẽ thấy cách cài đặt Thanh tiến trình đọc trong Blogger, Vì vậy, hãy đọc kỹ bài viết và làm theo tất cả các bước để bạn không gặp bất kỳ lỗi nào.

Hướng dẫn cài đặt

Bước 1:
Đăng nhập vào tài khoản Blogger của bạn Chuyển đến Phần chủ đề Nhấp vào Chỉnh sửa HTML Dán mã dưới đây trên thẻ </ head>

<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#0000FF;}
</style>

Bước 2:
Chèn mã dưới vào dưới thẻ <body>

<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
  </div>

Bước 3:
Và cuối, Thêm bên dưới mã trước thẻ </body>

<script>
window.onscroll = function() {
    myFunction()
};
function myFunction(){
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>

Bây giờ bạn lưu lại chủ đề và tận hưởng .

Bạn có thể xem DEMO tại đây

Lời kết

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha

Related Posts

The best CRM software in 2022

05:07 06/11/2022 App, Blogger, CRM

Customer relationship management (CRM) software has come a long way in the 15 or so years since I started using it. Today’s CRMs are incredibly versatile, and because of strong competition, have remained a relatively...

lên đầu trang