Thanh tiến trình cuộn ngang

Để hiển thị thanh tiến trình cuộn ngang như trang mình đang dùng, các bạn thực hiện theo hướng dẫn sau :

Thêm CSS

Bạn Đăng Nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng ]]></b:skin> và dán đoạn CSS sau đây vào trước nó.

#reading-progress{position:fixed;top:0;width:100%;height:3px;margin:0;left:0;z-index:99}
.bar{height:5px;background:#ff1065;position:fixed;top:0;z-index:99}

Thêm JS

Tiếp theo đó bạn thêm tiếp đoạn JS.
Bạn tim đến thẻ đóng </body> và dán đoạn JS sau đây vào trước nó.

<div id='reading-progress'>
    <span id='progress-bar' class='bar'></span>
</div>
<script type='text/javascript'>//<![CDATA[
window.addEventListener("scroll",function(e){var s=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,body=document.body,html=document.documentElement,d=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight),c=window.innerHeight,position=s/(d-c)*100;document.getElementById("progress-bar").setAttribute("style","width: "+position+"%")});
//]]></script>

Sau đó nhấn 💾 để Lưu lại.

Chúc bạn thành công!