Banner 1

Tạo nút Back To Top cuộn mượt cho blogspot

Back To Top công dụng của nó là giúp người đọc khi kéo xuống cuối bài viết để đọc, thay vì phải cuộn lên trên thì chỉ nhấn nút này là sẽ trở về đầu trang ngay lập tức
Được thiết kế bởi CSS và Javascript nên hiệu ứng cuộn rất mượt mà giúp blog trở nên dễ tuỳ biến hơn.[post_ad]
Demo bạn có thể xem ngay tại blog của mình đó :) Nếu bạn muốn thay đổi biểu tượng thì xem bài viết này.
Xem thêm:
Tạo nút Back To Top cuộn mượt cho blogspot
Tạo nút Back To Top cuộn mượt cho blogspot
Cách thêm nó vào blog như sau
Bước 1: Truy cập Blogger - Mẫu - Chỉnh sửa HTML đặt mã sau vào cặp thẻ <head>....</head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
Bước 2: Bạn tìm đến thẻ ]]></b:skin> và đặt CSS sau lên trên thẻ đó
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}
Bước 3: Bạn tìm đến thẻ </body> sau đó dán code sau lên trên thẻ đó
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
Cuối cùng lưu mẫu lại và xem thế quả. Chúc bạn thành công !
Xem nhiều thủ thuật hơn tại Star Trường Blog nhé ^^
Tạo nút Back To Top cuộn mượt cho blogspot Tạo nút Back To Top cuộn mượt cho blogspot Xét bởi Trường Quang on 9/05/2016 Xếp hạng: 5

Không có nhận xét nào:

# HƯỚNG DẪN NHẬN XÉT
Chú ý: Bạn phải đăng nhập tài khoản Google mới có thể bình luận.
_Cấm spam link dưới mọi hình thức
_Các liên kết sử dụng cú pháp: <a href='#'>Text hiển thị</a>
_Thay dấu # thành đường dẫn mà bạn muốn link tới.