Tạo thanh Reading Progress Bar for Blogger

Cộng tác viên tháng 8 21, 2017 #Blogger

Tình cờ đang lướt web, bạn trong thấy thanh Reading Progress Bar chạy ngang khi bạn kéo chuột để đọc tin tức hay nội dung của trang web đó trông rất hay, rất thú vị, nhưng không biết phải làm thế nào.
Không sao, hãy làm theo hướng dẫn sau đây, trang web của bạn cũng sẽ có thanh Reading Progress Bar tương tự.

Ảnh Demo

- Đầu tiên đăng nhập trang quản trị Blogger.
- Chọn menu Template và click chọn Edit HTML

- Thêm css trước thẻ </b:skin>

Copy

progress {
    /* Positioning */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    /* Get rid of the default border in Firefox/Opera. */
    border: none;

    /* Progress bar container for Firefox/IE10+ */
    background-color: transparent;

    /* Progress bar value for IE10+ */
    color: #E60000;
}
progress::-webkit-progress-bar {
    background-color: transparent;
}
progress::-webkit-progress-value {
    background-color: #E60000;
}
progress::-moz-progress-bar {
    background-color: #E60000;
}

- Tiếp tục tìm thẻ </body> (Ctrl + F). và dán đoạn code sau vào trên nó:

Copy

<script>
$(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});
</script>