Thanh Cuộn Phần Trăm Là Gì?
Thanh cuộn phần trăm là một tính năng có thể tính toán mức độ mà blog của bạn được khách truy cập theo dõi, vì vậy khi ai đó cuộn xuống bài đăng hoặc trang web của bạn thì bên cạnh thanh cuộn của bạn sẽ có một bộ đếm phần trăm.
Bằng cách cài đặt phần trăm thanh cuộn trên web hoặc blog chúng ta sẽ trông đầy đủ và thú vị hơn, và để cài đặt phần trăm thanh cuộn cũng không quá phức tạp, giờ đây đối với những bạn tò mò về cách tạo phần trăm thanh cuộn có thể đọc và áp dụng bài hướng dẫn trong trang web này, đối với tỷ lệ phần trăm DEMO, tôi sẽ tạo thanh cuộn ở cuối bài viết.
Mình sẽ hướng dẫn cho các bạn tạo số phần trăm ở thanh cuộn nhé.
Cách tạo bộ đếm phần trăm thanh cuộn
1. Đăng nhập vào Blogger
2. Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML
3. Sau đó, tìm mã này ]]></b:skin> hoặc </style>, nếu bạn tìm thấy, hãy sao chép mã css bên dưới và đặt nó ngay phía trên
/* Thanh cuộn phần trăm TL */ #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px} #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
4. Sau khi đặt css, hãy tìm lại thẻ <body> và sao chép mã bên dưới và đặt nó ngay phía trên thẻ <body>
<div id='scrollPersentase'/>
5. Tiếp theo, bạn tìm thẻ </body> và đặt đoạn mã javascript bên dưới ngay phía trên nó
Cuối cùng lưu chủ đề
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}
, 1500);
}
);
/*]]>*/
</script>
Nếu bạn muốn thay đổi màu nền của Percentage Scrollbar -> Đi đến bảng màu (chọn màu mong muốn), Thay thế #ff69b4 trong phần css.