.png "Đăng ký tên miền")
Tạo Hiện Thị Phần Trăm Khi Cuộn Xem Trang Cho Blogspot (Blogger)
Cập nhật ngày
Bởi Legend Phim
Có bao h bạn nghĩ đến việc khi kéo con trượt xuống thì sẽ hiện thị phần trăm lên chưa?
- Nếu có bạn là người suy nghĩ, luôn có những ý tưởng đôc đáo- Nếu không bạn là người đơn giàn, ko thích sự cầu kì
Và hôm nay mình sẽ hướng dẫn các bạn làm điều đó bởi mình vừa có ý tưởng đó vừa ko thích áp dụng lên blog của mình
Mục Đích
- Tạo sự khác biệt và cá tính riêng cho blog của mình.
- Thể hiện bạn là người phá cách
Thực Hiện
1. Các bạn chép đoạn css sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </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;
}<div id='scroll'></div><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>Nâng Cao
Nếu muốn thay đổi màu sắcCác bạn tìm dòng background-color:#369fcf; trong đoạn css, sau đó thay mã màu thành mã màu bạn thích. Để lấy mã màu các bạn vào đây
Lời Kết
Như vậy là mình đã hướng dẫn các bạn tạo phần trăm khi cuộn trang. Nếu có thắc mắc, hãy cmment mình sẽ giải đáp. Chúc các bạn thành công
Post a Comment