Chủ Nhật, 20 tháng 9, 2015

Code hiển thị phần trăm trên thanh cuộn blogspot

Người đăng: Minh Tuyết vào lúc 14:50 | 0 nhận xét

Thủ thuật “Thêm phần trăm vào thanh cuộn cho Blogger ” chúng ta sử dụng nó như một công cụ xác định vị trí chúng ta đang ở trong một trang Blog/Website, trên hay dưới hay là một vị trí bất kỳ nào đó ở thân trang (hiện thị phần trăm cụ thể trên thanh cuộn).

Hi vọng hiệu ứng phần trăm vào thanh cuộn giúp Blog/Website của bạn tạo nên sự khác biết biệt và đẹp hơn đồng thời tạo cảm giác thích thú hơn cho người đọc, từ đó người đọc sẽ có cảm tình và theo dõi blog của bạn nhiều hơn. Ngoài ra DEMO bài này mình thực hiện trực tiếp ở bài viết này các bạn kéo thanh cuộn để xem nhé!

☼ Bắt đầu thủ thuật

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ </b:skin>.

#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 đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.

<div id='scroll'></div>
Bước 3: Sau đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body> và Lưu mẫu.

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

Trở lại Blog/website để xem kết quả nhé !

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é.