Hướng Dẫn Tạo Hiệu Ứng Progress Bar Khi Cuộn Trang Cho Blogspot

Hướng Dẫn Tạo Hiệu Ứng Progress Bar Khi Cuộn Trang Cho Blogspot

Progress Bar Là Gì?
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 viết này, mình sẽ hướng dẫn bạn cách thêm thanh tiến trình đọc trong bài viết cho blogspot nhé.

Các đặc trưng:
  • Không cần thêm JQuery
  • Đoạn JavaScript rất ngắn gọn và không có file trỏ ra ngoài blogspot
  • CSS cơ bản
  • Đơn giản và nhanh chóng
  • Hoạt đọng với mọi trình duyệt
Hướng dẫn tạo hiệu ứng progress bar khi cuộn trang



Hướng dẫn tạo hiệu ứng progress bar khi cuộn cho Blogspot

1. Đăng nhập vào Blogger

2. Trên bảng điều khiển Blogger , Chọn Chủ đềChỉnh sửa HTML

3. Tìm thẻ </body> và dán đoạn Script dưới vào trên nó

<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>

4. Tiếp theo, tìm đến thẻ ]]></b:skin> và dán đoạn CSS vào trên nó

/* Progress Bar TLTeam */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}

5. Tìm đến thẻ <body> hoặc <body và dán đoạn mã dưới vào dưới thẻ đó

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

Cuối cùng lưu lại và thử xem nhé.

Nếu gặp vấn đề gì hãy comment ngay bên dưới nhé.

Bạn có thể thích những bài đăng này