Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Thêm phần trăm vào thanh cuộn cho Blogger


Như các bạn cũng biết thì thanh cuộn đóng một vị trí khá quan trọng, 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 web, trên hay dưới hay là một vị trí bất kỳ nào đó ở thân trang. Tại bài viết này tôi muốn hướng dẫn cho các bạn hiệu ứng hiển thị phần trăm cho thanh cuộn, để giúp website bạn trông bắt mắt hơn đối với người sử dụng. Demo bạn có thể xem ngay tại bài viết này, nhìn thanh cuộn ở phía bên phải màn hình.



Hướng dẫn cài đặt và sử dụng phần trăm vào thanh cuộn cho Blogger

Đầu tiên đương nhiên là đăng nhập vào Blogger của bạn, chọn blog mà bạn muốn chèn. Tiếp theo tại menu phía bên phải chọn Mẫu >> Chỉnh sửa HTML. Tiếp đến tìm đến thẻ ]]></b:skin> và chèn đoạn CSS vào phía trê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;
}
Kế đến các bạn tiếp tục tìm đến thẻ </head>  và chèn đoạn code sau vào phía dưới.

<div id='scroll'></div>
Cuối cùng tìm đến thẻ </body> chèn đoạn JavaScript sau ngay bên trên, xong rồi chọn 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(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Hy vọng hiệu ứng phần trăm vào thanh cuộn giúp bạn có một Blogger đẹp hơn và thu hút được nhiều người đọc hơn. Chúc bạn thành công!




0 comments:

Post a Comment

Popular Posts