Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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!
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à
Tương tự, nếu ID của phần Footer trong mẫu của bạn là #lower. Thì bạn tìm trong mẫu id='lower'#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'>Bước 4. Lưu mẫu.
$('#bacsiwindows-go-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 999);
});
// bacsiwindows.com
</script>
Copyright © 2017
39 nhận xét:
Cướp cmt đầu nè, hí hú :)
Chúc mừng Star Sơn IT đã bóc tem bài viết :)
Cười =)) : HahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHaha
==
Thumbnail mờ quá !
Size 1000x500 mà vẫn mờ ư !?
Hay lắm anh :)
Ok em :)
Hóng lâu lắm rồi == giờ mới có =))
Hihi giờ mới rảnh để viết :3
Anh quá đáng lắm luôn ớ ==
Photoshop CS mấy á anh ?
PTS CS3
Hà hà ha :v
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õ.
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!?
Việt Nam vô địch!!!!!!!!!!
Hahaaa =))))) T7 còn đá CK nữa mà =))))))
Quỷ xứ hà :3
Sửa xog PC em test thử. Thấy hay đấy a :)
Thăm blog em với :))
Mua template này có được Update không anh ?
- chất
Ok em
Ok em
Không template nào update hết nha em.
(y)
Không biết anh Trường có bận không chứ em thấy anh tt hơi ít nhoa :v
U23 Việt Nam <3 <3
Thấy không có bài viết mới là biết rồi :3
VN VÔ ĐỊCH !! <3 :D
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
BSW ít tt nhỉ. bận j hả a
Đấy, ai bán template blogspot mà có update đâu. Kể cả Themeforest :D
Bận học thôi em.
vl v mak rep cmt nhanh nhỉ :v
Ừm rảnh thì vào check bình luận mới thôi.
H mới vào lại dc blog bsw
Ừm mình cũng mới mở lại mấy ngày nay thôi ^^
Đăng nhận xét