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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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.

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.