Tạo Thanh Cuộn Hiển Thị Phần Trăm Cho Website
Dưới đây Laladee sẽ hướng dẫn anh em tạo phần trăm % chạy theo thanh cuốn cho Wordpress, Blogger hay Blogspot hoặc trang Web của mình nhé.
Sau đó anh em chọn phần Chủ đề --> Chỉnh sửa HTML
Rồi bấm vào khung trong phần chỉnh sửa.
Tiếp theo anh em bấm cho tôi tổ hợp phím Ctrl + G hoặc Ctrl + F để mở ô tìm kiếm.
Gõ vào ô tìm kiếm thẻ: </body>
Rồi Enter.
Sau đó dán đoạn Code lên trên thẻ </body>
<div id='scroll'/>
<script>
/*<![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 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
<div id='scroll'/>
<script>
/*<![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 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Link đoạn Code trên ( Nếu link hỏng thì liên hệ Admin ngay nhé ).
Anh em chỉnh màu tùy ý nhé.
Lưu ý: Khi anh em copy hay bị lỗi dấu ngoặc kép nên anh em xóa (") đi gõ lại là được.
Chúc anh em làm thành công cho trang Web của mình.
Xem Thêm: Hướng Dẫn Tạo Thanh Cuộn Đẹp Mắt Cho Blogspot
Anh em chỉnh màu tùy ý nhé.
Lưu ý: Khi anh em copy hay bị lỗi dấu ngoặc kép nên anh em xóa (") đi gõ lại là được.
Chúc anh em làm thành công cho trang Web của mình.
Xem Thêm: Hướng Dẫn Tạo Thanh Cuộn Đẹp Mắt Cho Blogspot
