Cách Thêm Progress Bar Hiển Thị Tiến Độ Cuộn Trang Cho Blogspot

Thanh Progress Bar cho Blogspot

Bài viết này tui sẽ hướng dẫn các bạn cách thêm Progress Bar cho Blogspot nha!

Progress Bar là gì?

Hiểu đơn giản, nó là cái này nè ( mọi người đọc blog của mình nhìn lên trên cùng thấy 1 cái thanh nó chạy trên cùng đó chính là Progress Bar nhé ) 

Ví dụ về thành Progress Bar

Progress Bar là một thanh thường nằm phía trên cùng website hay blog.

Khi người dùng cuộn xuống, thanh này sẽ tự động đầy dần, thể hiện % bài viết họ đã đọc.

 Nó giúp người đọc không bị lạc, biết họ đang đọc đến đâu và tăng trải nghiệm lướt web mượt mà hơn.

tham khảo: wikipedia 

Cách Thêm Progress Bar Cho Blogspot

Để có thể thêm Progress Bar vào Blogspot ( Blogger ) bạn cần phải thực hiện thêm Css, JS và HTMl.

Đừng lo, bạn chỉ cần Coppy và gián theo những bước dưới đây là được nhé:

Bước 1: Thêm CSS

Bạn vào chủ đề => tùy chỉnh => nâng cao và chọn thêm CSS ( hình bên dưới ) sau đó dán đoạn code này vào là được nhé 😁:

#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: red;
  z-index: 9999;
}
  

Thêm CSS cho blogspot

Bước 2: Thêm JavaScript ( JS )

Bạn có thể chèn đoạn code này vào trước thẻ đóng </body> hoặc tạo một tiện ích HTML/JavaScript cũng được nhé và thêm đoạn code này vào:

<script>
window.onscroll = function() {scrollProgressBar()};

function scrollProgressBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
}</script>

Bước 3: Thêm HTML

Bạn chỉ cần chèn đoạn code này trước thẻ đóng </body> là được nhé:

<div id="progressBar"></div>
  

Như vậy là mình đã hướng dẫn bạn Cách Thêm Progress Bar Cho Blogspot rồi , nếu thấy hữu ích đừng tiếc để lại cho tui một comment nha!!! 

Tạm biệt và hẹn gặp lại 🫠

Bạn cũng có thể xem thêm bài viết: Cách Thêm Progress Bar Hiển Thị Tiến Độ Cuộn Trang Cho WordPress