21 thg 8, 2017

Tạo thanh Reading Progress Bar for 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 quản trị Blogger.
- Chọn menu Template và click chọn Edit HTML
- Thêm css trước thẻ </b:skin>
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 tìm thẻ  </body> (Ctrl + F). và dán đoạn code sau vào trên nó:
<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>

- Tiếp tục tìm thẻ  <body> (Ctrl + F). và dán đoạn code sau vào sau nó, ở đâu cũng được miễn là trong cặp thẻ <body>  </body>
<progress value="0"></progress>

- F5 và xem thành quả thôi :smile:

Ngoài ra bạn nào muốn áp dụng cho trang web không phải là Blogger thì áp dụng tương tự nhé

Bài đăng Mới hơn Bài đăng Cũ hơn

Không có nhận xét nào:

Đăng nhận xét

Biểu mẫu liên hệ

Tên Email * Thông báo *