NGUYỄN PHỎM IT BLOG

BLOG CHIA SẺ THỦ THUẬT MIỄN PHÍ

TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT

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 sau phần </head>
<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>
/* 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é@@@
                                                                                                   
                                                                                                Nguồn: Star Dũng Blog

● Hãy là con người văn minh từ những câu nói

Không có nhận xét nào