Bạn hãy thực hiện theo các bước dưới đây để chèn một thanh tiến trình vào bài viết, giúp người đọc có thể tiện theo dõi quá trình đọc nội dung trên website. Hãy thực hiện từng bước và tránh những lỗi sao chép.

Dưới đây là các bước thực hiện:

Bước 1: Mở Chủ đề, sau đó vào chế độ Chỉnh sửa HTML.
Bước 2: Sao chép đoạn Javascript bên dưới và dán nó lên trên 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ước 3: Sau đó, sao chép đoạn CSS bên dưới và dán nó lên trên thẻ ]]> </ b: skin>:

.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}
Bước 4: Dán đoạn mã HTML bên dưới thẻ <body>:

<div class='progress-container'>
<div class='progress-bar' id='myBar'/>
</div>
Chỉnh sửa màu sắc và kích thước của thanh tiến trình
Để thay đổi màu, hãy chỉnh background: #F86152 và thay thế bằng mã màu bạn muốn.
Và để thay đổi kích thước của thanh tiến trình bạn chỉnh sửa height: 5px và đổi giá trị 5px.

Lời kết
Hy vọng bạn sẽ thích bài viết này, hãy chia sẻ nó với bạn bè của bạn. Việc thiết lập một thanh tiến trình giúp người xem nội dung có thể điều tiết được tốc độ cũng như thời gian theo dõi.

Theo PC Week