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!

39 nhận xét:

Star Sơn IT nói...

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

Trường Nguyễn nói...

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

Star Sơn IT nói...

Cười =)) : HahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHahaHaha

Trường Nguyễn nói...

==

Star Cường IT ­ nói...

Thumbnail mờ quá !

Trường Nguyễn nói...

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

Star Dũng Blog nói...

Hay lắm anh :)

Trường Nguyễn nói...

Ok em :)

Star Đức Blog nói...

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

Trường Nguyễn nói...

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

Star Đức Blog nói...

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

Star Đức Blog nói...

Photoshop CS mấy á anh ?

Trường Nguyễn nói...

PTS CS3

Trường Nguyễn nói...

Hà hà ha :v

Star Cường IT ­ nói...

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ường Nguyễn nói...

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

NAD nói...

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

Trường Nguyễn nói...

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

Star Đức Blog nói...

Quỷ xứ hà :3

Game Mobi nói...

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

Star Dũng Blog nói...

Thăm blog em với :))

Tính Getter nói...

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

Thanh Phú IT nói...

- chất

Trường Nguyễn nói...

Ok em

Trường Nguyễn nói...

Ok em

Trường Nguyễn nói...

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

Trường Nguyễn nói...

(y)

Star Sơn IT nói...

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

Quốc Hiếu nói...

U23 Việt Nam <3 <3

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Phú Cường Blogger nói...

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ọng Khanh Nguyễn nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

Bận học thôi em.

Trọng Khanh Nguyễn nói...

vl v mak rep cmt nhanh nhỉ :v

Trường Nguyễn nói...

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

Thủ Thuật PC 4x nói...

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

Trường Nguyễn nói...

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

Đăng nhận xét