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

Cộng tác viên tháng 12 02, 2017 #Thủ Thuật #Thủ Thuật Blog

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é@@@

56 bình luận

Chia sẻ