Tạo hiệu ứng thanh tiến trình khi đọc bài viết trên blogspot
Mở đầu
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("myBar").style.width = scrolled + "%";
}
</script>
Bây giờ bạn lưu lại chủ đề và tận hưởng .
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
Post a Comment
image quote pre code