Tạo thanh cuộn lên xuống hiện thị % tuyệt đẹp phong cách riêng blogspot-blogger

Nhatthienkt.net - Tạo thanh cuộn có hiện thị phần trăm tuyệt đẹp bạn đã thử chưa. Và đây là thủ thuật sưu tầm từ nhiều nguồn trên Internet, nếu thích bạn có thể áp dụng cho blog của mình đẹp hơn.
Đi thẳng vào vấn đề các bạn có thể xem demo 

Tạo thanh cuộn hiện thị phần trăm

Bước 1: Tùy chỉnh HTML

- Vào Mẫu chọn Chỉnh sửa HTML
- Tìm thẻ ]]></b:skin>
- Chèn đoạn CSS sau lên trên nó


#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

- Tiếp tìm đến thẻ </body> và chèn đoạn sau lên trên nó

<div id='scroll'/>
<script>
/*<![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(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

Bước 2: Lưu lại mẫu

Bước 3: Tùy chỉnh màu sắc thanh cuộn

Để nhanh và dể test, ta thực hiện

• Vào Mẫu chọn Tùy chỉnh
• Vào mục Nâng Cao
• Dán đoạn CSS sau

/* Webkit Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #FFFFFF; -webkit-box-shadow: inset 1px 1px 2px #E0E0E0; border: 1px solid #D8D8D8; } ::-webkit-scrollbar-thumb { background: #1F3A93; -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4); } ::-webkit-scrollbar-thumb:hover { background: #AAA; } ::-webkit-scrollbar-thumb:active { background: #888; -webkit-box-shadow: inset 3px 1px 2px rgba(0,0,0,0.3); }

Lưu ý: 

• webkit-scrollbar { width: 5px; }: Ta chỉnh giá trị độ rộng của thanh cuộn như thành 10 hoặc 15
• webkit-scrollbar-thumb { background: #1F3A93;  Thay giá trị #1F3A93 thành màu khác.
• Sau khi chỉnh xong thực hiện Áp dụng cho mẫu

Vậy là hoàn thành, chúc các bạn thành công!