Hiệu ứng đếm phần trăm khi cuộn trang cho Blogger (Blogspot)

Hi, xin chào các bạn đã lâu lắm rồi mình không đăng bài lên Minh Quy Design nên hôm nay mình chia sẻ một code vô cùng độc đáo sẽ gây nhiều ấn tượng làm cho khách truy cập thích thú hơn.

Đặc điểm của code này là hiển thị ở mọi thiết bị màn hình không như các code khác chỉ hiện ở desktop.

Demo: mình cài trực tiếp code vào bài viết này để bạn trải nghiệm.

Hướng dẫn: Bạn copy và dán code này vào Tiện ích HTML/Javascript của Blogger trong phần Bố Cục là được rồi đó.

<style>
/* hiệu ứng cuộn đếm phần trăm - minh quy design */
#cuondemphantram {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500; /* nó sẽ nằm trêm các widget khác có số z-index nhỏ hơn nó */
  padding: 3px 8px; /* đẩy lên trên: 3px, bên phải: 8px so với tâm của nó */
  background-color: #2187e7; /* màu nền */
  color: #fff; /* màu của chữ */
  border-radius: 3px; /* bo viền */
}
#cuondemphantram:after { /* thêm cho nó có độ bóng xíu */
  content: " "; 
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px; /* khoảng cách của nó so với lề trên */
  border: 4px solid transparent;
  border-left-color: #2187e7;
}
</style>
<div id='cuondemphantram'/>
<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 - $('#cuondemphantram').height() / 2;
    $('#cuondemphantram')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#cuondemphantram').fadeOut();
    }, 1500);
});
//]]>
</script></div>

Chú ý: #2187e7 là màu nền bạn chỉnh sửa sao cho phù hợp với màu của blog

Lời kết

Bài viết của mình chỉ có vậy thôi. Nếu bạn có bất cứ thắc mắc gì thì comment ngay bên dưới để chúng mình cùng nhau giải đáp nhé. Chúc các bạn thành công!