Thêm phần trăm vào thanh cuộn cho Blogger

Như các bạn cũng biết thì thanh cuộn đóng một vị trí khá quan trọng, chúng ta sử dụng nó như một công cụ xác định vị trí chúng ta đang ở trong một trang web, trên hay dưới hay là một vị trí bất kỳ nào đó ở thân trang. Tại bài viết này tôi muốn hướng dẫn cho các bạn hiệu ứng hiển thị phần trăm cho thanh cuộn, để giúp website bạn trông bắt mắt hơn đối với người sử dụng. Demo bạn có thể xem ngay tại bài viết này, nhìn thanh cuộn ở phía bên phải màn hình.

Hướng dẫn cài đặt và sử dụng phần trăm vào thanh cuộn cho Blogger

Đầu tiên đương nhiên là đăng nhập vào Blogger của bạn, chọn blog mà bạn muốn chèn. Tiếp theo tại menu phía bên phải chọn Mẫu >> Chỉnh sửa HTML. Tiếp đến tìm đến thẻ ]]></b:skin> và chèn đoạn CSS vào phía trên.

#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;
}

Kế đến các bạn tiếp tục tìm đến thẻ </head>  và chèn đoạn code sau vào phía dưới.

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

Cuối cùng tìm đến thẻ </body> chèn đoạn JavaScript sau ngay bên trên, xong rồi chọn Lưu Mẫu.

<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>

Hi vọng hiệu ứng phần trăm vào thanh cuộn giúp bạn có một Blogger đẹp hơn và tạo cảm giác thích thú hơn cho người đọc, từ đó người đọc sẽ có cảm tình và theo dõi blog của bạn nhiều hơn.