TẠO NÚT BACK TO TOP, BACK TO HOME

Oke Hôm Nay Mình Sẽ Hướng Dẫn Các Bạn Cách Thêm Nút Back To Top Và Back To Home Oke. Các Bạn Edit Đoạn CSS Sao Cho Phù Hợp Với Template Các Bạn Nhé Và Ngời Ra Các Bạn Có Thể Edit Màu Ở Đoạn CSS (Bước 2 Nhé)

CÁCH THỰC HIỆN:
Bước 1: Đăng nhập Blogger  Chủ đề  Chỉnh sửa HTML.
Bước 2: Copy & Paste đoạn code này phía trên thẻ ]]<>/b:skin
/Back To Top-Home/ .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 3: Paste đoạn CSS ở dưới lên trên thẻ <body> 
<div class='back-top'><i class='fa fa-chevron-up'/></div>
  <div class='back-home'><a href='http://www.huynhngoctinhit.tk' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<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>
Bước 4: Lưu Template lại và xem thành quả.

Tất cả bài viết đều được phát triển bởi Admin, nếu bài viết này liên quan đến nguồn hoặc bản quyền của bạn thì hãy nhận xét xuống dưới để được gỡ bỏ. Cảm ơn bạn!

Phản Hồi Độc Giả

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Bình luận của bạn sẽ được gửi đến Admin để kiểm duyệt
Biểu Tượng Cảm XúcBiểu Tượng Cảm Xúc