Code đếm phần trăm khi cuộn trang cho blogger

Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn code đếm phần trăm khi cuộn trang cho blogger. HƯỚNG DẪN THỰC HIỆN Đầu tiên các bạn đăng ...

Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn code đếm phần trăm khi cuộn trang cho blogger.

HƯỚNG DẪN THỰC HIỆN

Đầu tiên các bạn đăng nhập vào trang quản trị blogger, sau đó các bạn chọn Chủ đề -> Chỉnh sửa

Tiếp theo các bạn tìm đến thẻ ]]></b:skin> rồi dán đoạn code sau lên trước 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}

Sau đó các bạn dán đoạn code sau lên trước thẻ </body>

<div id='scroll'/>
<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> 

Cuối cùng các bạn lưu template lại và xem kết quả thu được.

LỜI KẾT 

Vậy là lại thêm một bài hướng dẫn giúp cho blog của các bạn trở nên độc đáo hơn rồi. Chúc các bạn thành công!

Nếu bạn gặp lỗi trong quá trình thực hiện hãy để lại comment dưới bài viết này.