Thảo Luận

×Close

Thêm Nút Back To Top Cho Blogspot Tuyệt Đẹp

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, 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, mình cũng đang sử dụng nó né!

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ở lại đầu trang này sử dụng Font Awesome để tạo nên cho nó đẹp. Các bạn có thể tham khảo bài viết dưới đây:

  • Cài đặt Font Awesome 5 Pro cho Blogger
  • Bước 1: Các bạn chèn đoạn css sau lên trên ]]></b:skin>

    /* Back To Top */
    .backtotop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        cursor: pointer;
        font-size: 25px;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
        padding: 10px;
        background-color: #138882;
        opacity: .6;
        color: #fff;
        text-align: center;
        width: 45px;
    border-radius:5px;}
    .backtotop:hover{opacity:1}

    Bước 2: Thêm đoạn HTML và Js sau lên trên thể đóng </body>

    <div class='backtotop'><i class='far fa-hand-point-up'/></div>
    <script type='text/javascript'>
    $(function(){$(window).scroll(function(){$(this).scrollTop()&gt;100?$(&quot;.backtotop&quot;).fadeIn():$(&quot;.backtotop&quot;).fadeOut()}),$(&quot;.backtotop&quot;).click(function(){return $(&quot;html,body&quot;).animate({scrollTop:0},800),!1})});
    </script>

    Lưu template lại và xem kết quả nhé!

    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 blogspot khá đơn giản, hi vọng các bạn sẽ thích nó! Chúc Các Bạn Thành Công!

    ➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
    ➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
    ➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

    11 nhận xét
    Hiển thị
    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ới hơn Cũ hơn