Khanh Blogger
Thủ thuật Blog 
Đặt liên kết 
Star Cường IT 
Tôi Học Tin Học 
Đức Huy Blog 
Hồ Nguyên IT 
Hưng Star IT 
zOmbie.win 
Nghĩa Rồng Blog 
Star Nhân IT 
Star Đức Blog 
Tôi Việt Code 
Tuổi trẻ IT 
Thủ thuật PC4x 
Nguyễn Duy Blog 
Quản trị viên
•
•
Chào các bạn đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn cho các bạn một Thủ Thuật Blog nhỏ >> TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT. OK làm thôi =))
 |
| Ảnh minh họa |
CÁC BƯỚC THỰC HIỆN
B1: Vào blogger.com truy cập Quản trị viên blogger > Chủ đề > Chỉnh sửa HTML
B2: Thêm thư viện Font (Nếu chưa có) > Coppy đoạn Code dưới đây vào phía trước phần
</head> hoặc <head/> trong theme.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>B3: Dán toàn bộ đoạn CSS dưới đây vào trước thẻ
]]></b:skin> trong theme./* Back to top, Back home, Go back*/
.back-to-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:90px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:50px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.go-back{z-index:9999;width:35px;height:35px;position:fixed;bottom:10px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-top1:hover,.back-home:hover{opacity:1},go-back:hover{opacity:1}
Code
B4: Tiếp theo chúng ta chèn Code hiển thị 3 nút đó vào vị trí mà bạn muốn (Thường là giữa cặp thẻ
body .) <a class='back-to-top' href='#' title='Back to Top'><i class='fa fa-chevron-up' style='color:#fff'/></a>
<div class='back-home' title='Back to Home'><a href='/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<a class='go-back' onclick='history.back(-1)' title='Go-back'><i class='fa fa-arrow-left' style='color:#fff'/></a>
Code
B5: Lưu Template lại và thưởng thức thôi !!!
TỔNG KẾT
Trước khi áp dụng thủ thuật này bạn phải xóa hết các code nút Back-to-top, Back-home,... cũ có trong blog đi nhé nếu không thì các nút đó sẽ chèn lên nhau gây xấu blog.
Cảm ơn các bạn đã xem!
Chúc các bạn thành công (Tuần mới vui vẻ hạnh phúc nhé)@@@
Hẹn gặp lại với bài viết tiếp theo nhé@@@
Bạn và người khác
55 bình luận
