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é
0 bình luận