Tạo hiệu ứng phần trăm (%) khi lăn chuột cho Blogspot

Với thủ thuật này thì khi cuộn trang - lăn chuột xuống dưới thì sẽ có một số đếm chỉ số phần trăm trang đã cuộn được nằm ở ngay thanh cuộn bên phải.

Thật ra thủ thuật này cũng không phải là mới, nhưng với những thay đổi nhỏ khi áp dụng thủ thuật này sẽ làm cho Blog của bạn trông bắt mắt, thú vị như đang đọc một cuốn sách trên Wattpad vậy :3 Ngoài ra, nó còn giúp cho người đọc có thể biết được họ đang đọc đến đâu, bài còn dài không? (đối với những bài viết dài như truyện vậy) chẳng hạn như bài viết Kinh nghiệm viết Email một cách chuyên nghiệp của mình khá là dài đối với những ai lười đọc :3

Và các bạn có thể thấy thì Blog mình đang áp dụng hiệu ứng này ^^

#CÁCH TẠO HIỆU ỨNG (%)

Bước 1: Vào Blogspot > Chủ đề > Chỉnh sửa HTML

Chép đoạn CSS dưới này vào TRƯỚC thẻ ]]></b:skin> hoặc thẻ </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Bước 2: Tiếp tục dán đoạn HTML phía dưới vào TRƯỚC thẻ </head>

<div id='scroll'></div>

Bước 3: Sau đó lại tiếp tục chép đoạn Javascript sau và dán nó vào TRƯỚC thẻ </body>

<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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>