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*/Bước 4: Chúng ta chèn Code hiển thị 3 nút đó vào trước thẻ kết
.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}
</body<a class='back-to-top' href='#' title='Back to Top'><i class='fa fa-chevron-up' style='color:#fff'/></a>Bước 5: Lưu lại và....Thế thôi.
<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>
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!