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.
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ẻ !
Xem nhiều thủ thuật hơn tại Lãng Tử Studio
Đừng quên Like và Share nếu thấy bài viết bổ ích
Nguồn: itviet360
.jpg)
0 nhận xét:
Đăng nhận xét