Tạo nút Back To Top, Home, Go Back tuyệt đẹp cho blogspot ( Cực Chất )
/ lúc / 23 bình luậ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

Bước 1: Truy cập chỉnh sửa HTML. 
Bước 2: Thêm thư viện Font (Nếu chưa có). Sau đó Copy đoạn Code dưới đây vào trước thẻ kết </head
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Bước 3: Copy đ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}
Bước 4: Chúng ta chèn Code hiển thị 3 nút đó vào trước thẻ kết </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>
Bước 5: Lưu lại và....Thế 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.
Chúc các bạn thành công. Cảm ơn các bạn đã xem!

HIỆN ĐANG CÓ 23 BÌNH LUẬN

avatar
Huỳnh Hoài Bảo

Thay url liên kết giúp Bảo lại là
http://baoshady.blogspot.com/
Bảo Cảm ơn <3

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

ok tks nhiều nha

TRẢ LỜI

hay lắm đang cần

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

Dũng ơi ông mua domian thanh toán = card ở đâu vậy giúp tôi với

TRẢ LỜI
avatar
Star Dũng Blog

Đây nhé bạn
https://inet.vn/

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

Hè Lố , Quí Đến Đây , buổi chiều tốt lành nhá <3

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn

TRẢ LỜI

Đẹp đó bạn

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn bạn

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

Thay url liên kết giúp Bảo lại là
http://baoshady.com
Bảo cảm ơn nè <3

TRẢ LỜI
avatar
Star Dũng Blog

kinh nhề mấy bác đổi domain nhanh thế đã lên .com ròi
=)) Đã đổi

TRẢ LỜI
avatar
Nguyễn Lương Duy

TTT (3)

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

haha thường mà nhịn mỳ tôm 1 tuần gia hạn 2 năm đó :v

TRẢ LỜI
avatar
Star Dũng Blog

Buổi sáng vui vẻ

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

hey bác, cho em xin cái ảnh để đặt liên kết nha nha <3 - Ghé thăm blog tui nha bác, www.nguyenngocquidz.tk

TRẢ LỜI

Tương tác tốt nha em

TRẢ LỜI
avatar
Phan Văn Dũng

dạo này tt ít quá man

TRẢ LỜI

Bận quá đang thi
:D

TRẢ LỜI
avatar
Phan Văn Dũng

ok. thi xong tt cũng đc. Thi tốt nha (3)

TRẢ LỜI

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.