Tạo nút Back To Top đẹp và đơn giản cho Blogger

 

Back To Top

| Mở đầu

Xin chào mọi người, lâu rồi chưa gặp ha. Mình có tìm hiểu về một chút tiện ích blogger. Đó là tạo nút Back To Top cho website của mình. Cái này không phải do mình làm, mình đi tìm hiểu trên google và đem về hướng dẫn cho mọi người, nhiều người thì biết rồi và nếu bạn chưa biết thì làm theo hướng dẫn bên dưới nhé.

Mô tả hình bên dưới nhé 

Ví dụ To Back Top

| Hướng dẫn thêm nút Back To Top

Đầu tiên là muốn thêm nút Back To Top cần phải có Font Awesome, vì nút này sử dụng font đó và còn đẹp nữa. 

Nếu chưa biết thêm Font Awesome vào blogger thì đọc bài viết này nhé.

* Cài đặt Font Awesome 5 Pro Cho Blogger

Sau khi cài được Font Awesome xong thì tiếp theo các bạn vào Blogger -> Chủ đề -> Chỉnh sửa HTML -> Tìm tới ]]></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 tiếp theo các bạn thêm code HTML và Js bên dưới lê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>

Vậy là xong

| Lời kết

Các bạn bấm lưu và F5 xem kết quả nha. Cảm ơn các bạn đã đọc bài viết này, chúc các bạn một ngày tốt lành