Tạo hiệu ứng phần trăm thanh cuộn (Scrollbar) 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

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

#CÁCH TẠO HIỆU ỨNG (%) thanh cuộn(Scrollbar)

• 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>

• Bước 4: Save mẫu lại. Done! Chúc các bạn thành công!

Kết luận

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều.