Hiển thị giá trị % cùng với thanh cuộn trong Web, Blogspot

Một tiện ích khá hay khi người đọc Blog, Website của bạn có thể biết được mình đang kéo bao nhiêu % thanh cuộn. Trong bài viết hôm nay, ITViet360 sẽ giải thích làm thế nào bạn có thể thêm / hiển thị giá trị phần trăm để thanh cuộn trong blog của blogger. Thực sự nó không phải là quan trọng đối với blog của bạn, nhưng điều này là dành cho những người muốn cung cấp cho hiệu ứng độc đáo để di chuyển thanh cuộn trong blog. Nó có thể hữu ích cho độc giả của bạn để kiểm tra xem có bao nhiêu họ đã cuộn xuống hoặc lên hoặc có bao nhiêu nội dung còn lại để được đọc.
Hiển thị giá trị % cùng với thanh cuộn trong Web, Blogspot

Trên giao diện Website bạn cũng hoàn toàn làm tương tự trên Blogspot nhé.

Hiển thị giá trị % cùng với thanh cuộn trong Blogspot

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
<style>
#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;
}
</style>

Bước 3: Tìm tới </head>  và dán code dưới đây ngay sau nó
<div id='scroll'></div>
Tức là bạn sẽ thấy nó đứng ngay trên <body>
</head>
<div id='scroll'></div>
<body>

Bước 4: Tìm tới </body> và dán code dưới đây ngay trên nó
<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>

Bước 5: Lưu mẫu lại và xem kết quả :)
Chúc các bạn vui vẻ !
Chuyên mục: , , ,

0 nhận xét:

Đăng một bình luận