Chào các bạn, Mới gần đây, mình có sửa lại blog một tí. Mình thấy đã có Back To Top (lên đầu trang) rồi thì nên có thêm Back To Bottom (xuống cuối trang) để mọi người có thể dễ dàng di chuyển qua lại cho nhanh chỉ bằng 1 cú click chuột và không phải lăn chuột kéo thanh cuộn nữa.

Khởi nguồn của 2 nút có sẵn Back To Top và Home (Trang chủ) thì mình lấy bên BSW và chỉnh sửa lại CSS cũng như thêm nút Back To Bottom hiệu ứng trượt vào thôi. Ngay sau đây mình cùng bắt tay vào làm nhé.
Tạo tổ hợp nút Back To Top, Home, Back To Bottom cho Blogspot
Hình Minh Họa
Xem Demo

Cách thực hiện:

Bước 1: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm thư viện FontAwesome nếu blog bạn chưa có trước thẻ </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Bước 3: Dán toàn bộ đoạn CSS dưới đây trước thẻ ]]></b:skin>
/* Back To xxx */
.back-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);}
.back-bottom{z-index:9999;width:35px;height:35px;position:fixed;bottom:30px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);}
.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);}
.back-top:hover,.back-home:hover,.back-bottom:hover{background-color:#DF7401}
Bước 4: Tiếp đến, chèn đoạn code hiển thị 3 nút đó vào vị trí bạn thích (giữa cặp thẻ body) và nếu cảm thấy khó quá bạn có thể chèn trước </body>
<div class='back-top'><i class='fa fa-chevron-up'/></div>
<div class='back-home'><a href='https://phucuongblogger.blogspot.com/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<a class='back-bottom' href='#credit' style='color:#fff'><i class='fa fa-chevron-down'/></a>
<script type='text/javascript'>
 $(&#39;.back-bottom&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:$(&quot;#credit&quot;).offset().top},1000);});
    $(window).scroll(function() {
        if ($(this).scrollTop() &gt; 100) {
            $(&quot;.back-top&quot;).css({
                bottom: &quot;110px&quot;
            });
        } else {
            $(&quot;.back-top&quot;).css({
                bottom: &quot;70px&quot;
            });
        }
    });
    $(&quot;.back-top&quot;).click(function() {
        $(&quot;html, body&quot;).animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
</script>
Thay #credit bằng id hoặc class của phần tử bất kì nằm cuối blog nhé (view source để tìm, nếu khó khăn hãy bình luận bên dưới nha)
Bước 5: Lưu Template lại.

Kết luận:

Vậy là mình vừa hướng dẫn xong cho các bạn cách để thêm tổ hợp 3 nút Back To Top - Bottom, Home cho blog rồi đấy. Hãy tùy biến CSS để làm các nút trong đẹp hơn trong mắt bạn nhé.
Chúc các bạn thành công!

CHIA SẺ BÀI VIẾT

- - 38 bình luận
CHUYÊN MỤC

BÌNH LUẬN (38)

  1. Quá ok. Thanks Anh đã chia sẽ

    Trả lờiXóa
  2. Mình đã làm nhưng chỉ hiện mỗi nút home thôi, bạn xem giúp mình với: https://quocbinhvip.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Cái này là do template rồi bạn nhé, mình cũng chẳng hiểu do xung đột hay gì ấy mà template mình làm cũng không được.

      Xóa
    2. Giờ chịu thôi :)) hoặc bạn có thể dùng zotabox để làm cái nút như trên. Đơn giản hơn nhiều

      Xóa
    3. Nếu như k đc thì có thể do xung đột Js đó. Nếu thế thì bạn sửa lại CSS của nút back to top cho nó hiện lên trên nút home luôn, ở code bước 4 thì bạn bỏ hết javascript đi, giữ lại html hiển thị 3 nút thôi.

      Xóa
  3. Bài viết rất hữu ích, 1 share cho bác (Y)

    Trả lờiXóa
  4. Trả lời
    1. không ngờ luôn mình comment bài viết này 2 lần :v

      Xóa
    2. Haha, chắc do bài viết quá xuất sắc :v

      Xóa
  5. Xong 404 Facebook Error rồi đấy :3 Dùng tiếng việt dịch ra như nào đấy? Cho e cái demo (bằng hình ảnh nhé) vì e xài fb t.a mà đang lag k vào đc.

    Trả lờiXóa
    Trả lời
    1. Anh chỉnh tiếng việt luôn đi :v

      Xóa
    2. A quen dùng t.a rồi e :3 Để đó học luôn t.a e ạ. E dùng tiếng việt onl lên xem giúp a với. Để a việt hóa cho giống y xì.

      Xóa
    3. Anh lên fb nhập sai URL đi :3

      Xóa
    4. E k hiểu ý a à :v Ý là a chỉ dùng fb ngôn ngữ t.a thôi. A k thích dùng tiếng việt. Fb lại đang lag nữa a có vào đc đâu :)) Nãy a nhờ bạn a xong r.

      Xóa
    5. Trang này không khả dụng
      Liên kết bạn truy cập có thể bị hỏng hoặc trang có thể đã bị xóa.
      Nội dung là thế :v

      Xóa
    6. Ừ e vừa nhờ xong th bạn r. Nó chụp cho màn hình 404 r.

      Xóa
    7. Trang 404 của bác nên chừa lại cái thanh menu ở trên cho giống fb, vừa quay lại trang dễ, vừa đẹp nữa :v

      Xóa
    8. Thôi. E cố tình bỏ menu đấy. Cái đấy chưa responsive. Để ở 1 số máy hiển thị xấu lắm. Viết hẳn tiếng việt thế kia nó quay lại đc rồi. 3 chức năng y hệt bsw luôn

      Xóa
  6. Anh ơi em muon bỏ cái zotabox đi thì phải làm thế nào ???
    http://starkhanhofficial.blogspot.com/

    Trả lờiXóa
  7. Anh ơi em muon bỏ cái zotabox đi thì phải làm thế nào ???
    http://starkhanhofficial.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Inbox facebook anh.
      https://www.facebook.com/PhanManhCuong1999

      Xóa