Tạo số đếm phần trăm khi cuộn trang cho Blogspot (Blogger)

Hôm nay, mình sẽ hướng dẫn cho các bạn cách tạo số đếm phần trăm khi cuộn trang cho Blogspot (Blogger). Thủ thuật này rất đơn giản và rất hay, nó có thể tạo tính riêng biệt cho Blog của bạn.

Live Demo

Tạo số đếm phần trăm khi cuộn trang cho Blogspot

Tiến hành

1. Các bạn đăng nhập vào Blogger >> Mẫu >>Chỉnh sửa HTML >>Tìm đến thẻ đóng ]]><.

2. Thêm toàn bộ code sau vào trước thẻ ]]><.

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

3. Tìm đến thẻ đóng </head> và thêm vào sau nó.

<div id='scroll'/>

4. Cuối cùng tìm đến thẻ đóng </body> và thêm đoạn code sau vào trước 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>

5. Lưu lại và tận hưởng kết quả.
Chúc các bạn thành công.