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!

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!