Tạo thanh cuộn (Scrollbar) có hiện phần trăm (%) đẹp cho Blogspot

tao thanh cuon scrollbar hien phan tram dep cho blogspot

Chắc hẳn bạn không còn quá xa lạ với cái tên Scrollbar (tức Thanh cuộn trang) rồi phải không. Đây là một chức năng rất hữu ích của trình duyệt giúp bạn có thể kéo lên kéo xuống trong một trang để đọc nội dung của trang đó.

Tuy nhiên, thanh cuộn mặc định thì trông khá là đơn điệu và không có điểm nhấn nổi bật cả. Do đó, với thủ thuật này bạn hoàn toàn có thể thay đổi thanh cuộn trở nên đẹp hơn và xác định bạn đang ở vị trí nào của trang (bằng cách thể hiện số phần trăm).

tao thanh cuon scrollbar hien phan tram dep cho blogspot

Bây giờ, chúng ta cùng nhau thực hiện nhé!

Thanh cuộn trang có hiện phần trăm đẹp

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Thêm đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin>.

#scrollbar {display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#069; color:#fff; font-size:14px}
#scrollbar:after {content:" "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#069}
::-webkit-scrollbar {width:8px; height:5px}
::-webkit-scrollbar-track {background:#fff}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive {background:#069}

Bước 3. Sao chép đoạn mã dưới đây rồi dán chúng vào giữa hai thẻ <head></head>, nhưng tốt nhất là nên đặt vào trước thẻ đóng </head>.

<div id='scrollbar'></div>

Bước 4. Sao chép đoạn mã Javascript dưới đây rồi dán chúng vào giữa hai thẻ <body></body>, nhưng tốt nhất là nên đặt vào trước thẻ đóng </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 - $('#scrollbar').height() / 2;
    $('#scrollbar')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scrollbar').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Bước 4. Nhấn vào nút Lưu chủ đề để hoàn tất.

Chúc bạn thành công!