Làm thế nào để thêm thanh trượt Reading Progress Bar ngay trên đầu trang cho Blogger/Blogspot? Ý tưởng này xuất hiện trong quá trình lướt web, xem tin. Cụ thể là, khi chúng ta đọc một bài viết, ngoài nội dung, chúng ta quan tâm đến 2 yếu tố: một là thời gian đọc; hai là đọc đến đâu và còn bao lâu nữa xong. Reading Progress Bar giúp chúng ta điều thứ hai đó.
Tiện ích này không phải do mình nghĩ ra, cũng chẳng code mà có. Lượn lòng vòng, thấy hay nên chia sẻ lại thôi. Chi tiết cách làm mình hướng dẫn cụ thể dưới đây.
Bấm vào đây để XEM DEMO
Bước 1: Tìm thẻ </body> và thêm trước nó đoạn code này
<script>window.onscroll = function() {myFunction() };var winScroll = document.body.scrollTop || document.documentElement.scrollTop;function myFunction(){var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; }</script>
Bước 2: Tìm thẻ ]]></ và thêm trên nó đoạn code này
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}.progress-bar{height:5px;background:#F86152;}
Bước 3: Tìm thẻ <body> và thêm sau nó đoạn code này
<div class='progress-container'> <div class='progress-bar' id='myBar' style="width:0%;"></div> </div>
Bước 4: Lưu lại và Chỉnh sửa
Bấm lưu lại và chỉnh sửa màu sắc, vị trí tùy thích nếu không thích màu sắc và vị trí hiện tại của tác giả bài viết này.
Chi tiết bài viết gốc tham khảo tại đây.
* Please Don't Spam Here. All the Comments are Reviewed by Admin.