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("myBar").style.width = scrolled + "%";
}
</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
Post a Comment
image quote pre code