Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot
/ lúc / 39 bình luận
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!
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!

BÌNH LUẬN VỀ BÀI VIẾT (39)

avatar
Star Sơn IT

Cướp cmt đầu nè, hí hú :)

TRẢ LỜI
avatar
Trường Nguyễn

Chúc mừng Star Sơn IT đã bóc tem bài viết :)

TRẢ LỜI
avatar
Star Sơn IT

Cười =)) : HahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHaha

TRẢ LỜI
avatar
Trường Nguyễn

==

TRẢ LỜI
avatar
Star Cường IT ­

Thumbnail mờ quá !

TRẢ LỜI
avatar
Trường Nguyễn

Size 1000x500 mà vẫn mờ ư !?

TRẢ LỜI
avatar
Star Dũng Blog

Hay lắm anh :)

TRẢ LỜI
avatar
Trường Nguyễn

Ok em :)

TRẢ LỜI
avatar
Star Đức Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

Hihi giờ mới rảnh để viết :3

TRẢ LỜI
avatar
Star Đức Blog

Anh quá đáng lắm luôn ớ ==

TRẢ LỜI
avatar
Star Đức Blog

Photoshop CS mấy á anh ?

TRẢ LỜI
avatar
Trường Nguyễn

PTS CS3

TRẢ LỜI
avatar
Trường Nguyễn

Hà hà ha :v

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn

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!?

TRẢ LỜI

Việt Nam vô địch!!!!!!!!!!

TRẢ LỜI
avatar
Trường Nguyễn

Hahaaa =))))) T7 còn đá CK nữa mà =))))))

TRẢ LỜI
avatar
Star Đức Blog

Quỷ xứ hà :3

TRẢ LỜI
avatar
Game Mobi

Sửa xog PC em test thử. Thấy hay đấy a :)

TRẢ LỜI
avatar
Star Dũng Blog

Thăm blog em với :))

TRẢ LỜI
avatar
Tính Getter

Mua template này có được Update không anh ?

TRẢ LỜI
avatar
Thanh Phú IT

- chất

TRẢ LỜI
avatar
Trường Nguyễn

Ok em

TRẢ LỜI
avatar
Trường Nguyễn

Ok em

TRẢ LỜI
avatar
Trường Nguyễn

Không template nào update hết nha em.

TRẢ LỜI
avatar
Trường Nguyễn

(y)

TRẢ LỜI
avatar
Star Sơn IT

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ỜI
avatar
Quốc Hiếu

U23 Việt Nam <3 <3

TRẢ LỜI
avatar
Trường Nguyễn

Thấy không có bài viết mới là biết rồi :3

TRẢ LỜI
avatar
Trường Nguyễn

VN VÔ ĐỊCH !! <3 :D

TRẢ LỜI
avatar
Phú Cường Blogger

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

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

BSW ít tt nhỉ. bận j hả a

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Trường Nguyễn

Bận học thôi em.

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

vl v mak rep cmt nhanh nhỉ :v

TRẢ LỜI
avatar
Trường Nguyễn

Ừm rảnh thì vào check bình luận mới thôi.

TRẢ LỜI
avatar
Thủ Thuật PC 4x

H mới vào lại dc blog bsw

TRẢ LỜI
avatar
Trường Nguyễn

Ừm mình cũng mới mở lại mấy ngày nay thôi ^^

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.