Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot

Chào các bạn, theo yêu cầu của một số bạn muốn mình chia sẻ cách làm nút back to top mà mình đang sử dụng trên Blog. Thì bài viết hôm nay mình sẽ hướng dẫn các bạn cách làm nút back to top tuyệt đẹp và chất này!
Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp và chất
Bạn có thể xem Demo ngay tại trang chủ của bacsiwindows.com

Cách thực hiện

Bước 1. Dán CSS này vào trước thẻ ]]></b:skin>
#bacsiwindows-go-top{position:absolute;top:-35px;right:50%;background:#fff;color:#7577a9;border:6px solid #dddddd;height:60px;width:60px;text-align:center;line-height:60px;border-radius:0;font-size:1.2em;z-index:69;transform:rotate(45deg);margin:0 -50px}
#bacsiwindows-go-top:hover{border-radius:0 50px 50px;color:#7577a9!important}
#bacsiwindows-go-top i{transform:rotate(-45deg)}
Bước 2. Tìm ID của phần Footer trong Template của bạn.
Là sao? Ví dụ trên bacsiwindows.com, phần footer có ID là #lower. Thì bạn tìm trong mẫu id='lower'
Tương tự, nếu ID của phần Footer trong mẫu của bạn là #lower-wrapper hoặc #footer-wrapper thì bạn tìm trong mẫu đoạn code tương ứng: <div id='lower-wrapper'> hoặc <div id='footer-wrapper'>
và dán code HTML này vào sau thẻ đó.
<a href='javascript:;' id='bacsiwindows-go-top'><i class='fa fa-chevron-up'/></a>    
Để kiểm tra nhanh, hãy click chuột phải vào phần Footer và chọn Kiểm tra phần tử.

Bước 3. Tìm thẻ </body> và dán đoạn javascript này phía trên nó.
<script type='text/javascript'>
    $('#bacsiwindows-go-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 999);
    });
// bacsiwindows.com
</script>
Bước 4. Lưu mẫu.

Tổng kết

Đây là nút back to top được Bác Sĩ Windows viết bằng CSS cho Blogspot. Nếu không thực hiện được hãy bình luận bên dưới để được trợ giúp nhé. Chúc thành công!
  1. Cướp cmt đầu nè, hí hú :)

    Trả lờiXóa
    Trả lời
    1. Chúc mừng Star Sơn IT đã bóc tem bài viết :)

      Xóa
    2. Cười =)) : HahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHaha

      Xóa
  2. Trả lời
    1. Size 1000x500 mà vẫn mờ ư !?

      Xóa
    2. Photoshop CS mấy á anh ?

      Xóa
    3. Mờ ở đây không phải do kích thước mà do màu, trắng quá, cái gì cũng trắng nên nhìn không rõ.

      Xóa
    4. Không còn cách nào khác, với demo như vậy thì bắt buộc phải design như vậy..
      Tập trung vào 2 hình nhỏ kia thôi còn màu nền đâu quan trọng!?

      Xóa
  3. Hóng lâu lắm rồi == giờ mới có =))

    Trả lờiXóa
  4. Việt Nam vô địch!!!!!!!!!!

    Trả lờiXóa
  5. Sửa xog PC em test thử. Thấy hay đấy a :)

    Trả lờiXóa
  6. Mua template này có được Update không anh ?

    Trả lờiXóa
    Trả lời
    1. Không template nào update hết nha em.

      Xóa
    2. Update thế chết đấy e :( Kiểu như nâng đc vài version rồi mà update + sp liên tục thì die :D

      Xóa
    3. Đấy, ai bán template blogspot mà có update đâu. Kể cả Themeforest :D

      Xóa
  7. Không biết anh Trường có bận không chứ em thấy anh tt hơi ít nhoa :v

    Trả lờiXóa
  8. Trả lời
    1. Ừm mình cũng mới mở lại mấy ngày nay thôi ^^

      Xóa
CÓ THỂ BẠN ĐANG TÌM