Cách tạo bộ đếm phần trăm trên thanh cuộn cho Blogger

hanh cuộn phần trăm là một tính năng, hiểu nôm na là khi ai đó cuộn xuống bài đăng hoặc trang web của bạn thì bên cạnh thanh cuộn(thường bên tay phải màn hình) của bạn sẽ có một bộ đếm phần trăm trên tổng chiều dài trang mà bạn xem. Về cách cài đặt cũng không quá phức tạp, chì vài bước là xong. Còn ai muốn nghịch cho đẹp, cho vừa mắt thì cứ tìm hiểu thêm.

Bước 1: Vào Chỉnh sửa HTML > Tìm ]]></b:skin> hoặc </style> và thêm trước/trên nó:

/* Thanh cuộn phần trăm TL */ #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px} #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

Bước 2: Tiếp tục tìm <body> và thêm sau/dưới nó

<div id='scrollPersentase'/>

Bước 3: Cuối cùng, tìm </body> và thêm trên/trước nó, sau đó lưu lại là xong.

<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 - $('#scrollPersentase').height() / 2;
    $('#scrollPersentase')
      .css('top', distance)
      .text(' (' + Math.round(progress * 100) + '%)')
      .fadeIn(100);
    if (scrollTimer !== null) {
      clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
      $('#scrollPersentase').fadeOut();
    }
                             , 1500);
  }
                  );
  /*]]>*/
</script>

Nguồn bài viết Bloggerbyte