Chào các bạn, nút back to top là một nút được coi như không thể thiếu cho Blog hay một trang website nào đó, nếu nó ngắn thì không nói chứ nó dài thì hơi phiền. Trong hôm nay mình xin được hướng dẩn các bạn cách thêm Nút Back To Top vào blogspot, cùng bắt đầu nào!
Thêm Nút Back To Top Cho Blogspot Tuyệt Đẹp

Cái Nút này về căn bản là không phải do mình viết :3 , mà là mình lụm đại trên mạng và mang về Hướng dẩn cho các bạn nào đang có nhu cầu, kaka!

Thêm nút trở về đầu trang vào Blogger

Đầu tiên nói thêm một ít là nút trở đầu trang này sử dụng Font Awesome để tạo nên cho nó đẹp.
Bước 1: Thêm Đoạn Này Vào trên </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Bước 2: Các bạn chèn đoạn css sau lên trên ]]></b:skin>
.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;
}
trong đoạn css này có các phần để giới hạn vị trí của nút trở về đầu trang, bạn có thể tự chỉnh lại cho chính xác vị trí mà bạn thích nhé.
Bước 3: bây giờ có 2 kiểu trượt về cho bạn lựa chọn, bạn hãy chèn chúng lên trên thẻ </body> nhé:
Hiệu ứng 1 :Trượt lên đỉnh một cách bình thường không có hiệu ứng gì thêm
<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>
 Hiệu ứng 2: Trượt lên đỉnh và nó nảy lên xuống khi chạm đầu trang
<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Lời Kết 

Okey, như vậy là mình vừa hướng dẩn các bạn cách thêm nút Back to top vào blog,:p hi vọng các bạn sẽ thích nó!
Chúc Các Bạn Thành Công!
- - 11 bình luận
CHUYÊN MỤC

BÌNH LUẬN (11)

  1. Rất hay ! Hóng Bài Này Lâu Rồi ! Cảm Ơn <3 :p

    Trả lờiXóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. Cảm thấy xem được thì xem, không được thì thôi! mình không ép!

      Xóa
  3. Lấy Nick Facebook Inbox Fb.com/fanpagecuatruongtuan Lẹ -.-

    Trả lờiXóa
    Trả lời
    1. :v sao comment nào của m cũng lỗi font nhỉ

      Xóa
  4. Update hộ luôn cho các bạn ý lên font awesome 4.7 đi cho nó máu :))

    Trả lờiXóa
  5. nếu k thấy thẻ < /head> thì sao

    Trả lờiXóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé