Tạo tổ hợp nút To Top, Home,...

Cộng tác viên tháng 10 27, 2017 # BLOGGER

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é.

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é.

Nếu có leech đi đâu vui lòng để lại nguồn SiinBlog

Các bài viết cùng chủ đề: