Thêm giá trị phần trăm cho thanh cuộn cho bạn thấy tỷ lệ phần trăm của một trang trong khi di chuyển lên xuống. Giúp cho khách truy cập của bạn để dễ dàng xác định vị trí trong một trang web, trên hay dưới hay là còn bao nhiêu nội dung còn lại để đọc. Trong bài viết này, tôi sẽ chỉ cho bạn làm thế nào để thêm tỷ lệ phần trăm giá trị cho thanh cuộn trong blogger. Nó có thể sẽ hữu ích với những blog muốn tạo sự khác biệt và cá tính riêng cho blog của mình.


Các bước thêm tỉ lệ phần trăm cho thanh cuộn
Bước 1: Vào chỉnh sửa HTML và chèn đoạn code bên dưới vào trước thẻ ]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

Bước 2: Thêm vào bên dưới thẻ đóng </head> đoạn sau:

<div id='scroll'></div>

Bước 3: Tìm đến thẻ đóng </body> và chèn lên trên nó:

<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 - $('#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>

Bước 4: Nhấn Lưu mẫu

Chúc bạn thành công!