[SHARE] Cách tạo nút back to top và back home hiệu ứng mượt mà

Xin chào các bạn, nhân dịp Trung Thu nha các bác, tôi xin giới thiệu cho các bác quả nút backtotop và backhome nhé.
Không cần sử dụng đến nút của zotabox nhé. Ahihi
Demo:

CÁC BƯỚC THỰC HIỆN:

Bước 1: Blogger => Chủ đề => Chỉnh sửa HTML.
Bước 2: Các bạn tìm thẻ  ]]></b:skin và chèn đoạn code sau vào trước nó:

Copy

/* CSS btt */
.back-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:100px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);}
.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:100px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);}
.back-top:hover,.back-home:hover{background-color:#fc0000}

Bước 3: Các bạn tìm thẻ  </body> và thêm đoạn code sau vào trước nó:

Copy

<div class='back-top' title='Back to Top'><i class='fa fa-chevron-up'/></div>
<div class='back-home' title='Back to Home'><a href='http://www.starthao-it.com/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>

=> Các bạn thay http://www.starthao-it.com thành địa chỉ blog bạn nhé!
Bước 4: Lưu mẫu và xem kết quả.

LỜI KẾT

Rồi đó nha, mình đã giúp các bạn tạo một nút backtotop và backhome 2 trong 1 cực truất nhé. Chúc các bạn thành công!
Có gì khó khăn các bạn cứ comment ở dưới nhé.