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
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é
Không có nhận xét nào:
Đăng nhận xét