Tạo Nút back to top và back to bottom đơn giản không hiệu ứng cho blogspot
Bài viết trước mình cũng đã giới thiệu bài viết tương tự là tạo ra nút back to top và back to bottom với hiệu ứng trượt mượt mà, bài viết này là tiếp theo hướng dẫn các bạn tạo nút back to top khác đơn giản.
Back to top là một trong những tiện ích của blogspot mà bạn cài thêm để điều hướng người dùng lên trên đầu trang blogspot để người xem có thể thao tác trên menu để đọc
Bước 1: Vào mẫu tìm từ ]]></b:skin> và dán đoạn code CSS bên dưới phía trên thẻ ]]></b:skin>
Cách 1: Vào mẫu và dán trước thẻ </body> hoặc </head> đều được
Cách 2: Tạo 1 HTML/JAVACRIPT và dán vào đó
22:47:00 ›
0
›
Back to top là một trong những tiện ích của blogspot mà bạn cài thêm để điều hướng người dùng lên trên đầu trang blogspot để người xem có thể thao tác trên menu để đọc
Tạo Back to top và back to bottom:
Nút Back top top và back to bottom cho blogspot |
Cách thực hiện tạo nút back to top và back to bottom cho blogspot:
Các bạn copy đoạn code bên dưới:Bước 1: Vào mẫu tìm từ ]]></b:skin> và dán đoạn code CSS bên dưới phía trên thẻ ]]></b:skin>
.toptop{position: fixed;Bước 2: Có 2 cách chèn:
z-index: 9999;
bottom: 100px;
right: 25px;
padding-bottom: 0px;
background: #fff;}
.bottombottom{position: fixed;
z-index: 9999;
bottom: 150px;
right: 25px;
padding-bottom: 0px;
background: #fff;}
Cách 1: Vào mẫu và dán trước thẻ </body> hoặc </head> đều được
Cách 2: Tạo 1 HTML/JAVACRIPT và dán vào đó
Đoạn code bạn sẽ chèn 1 trong 2 cách đề tạo nút Tạo Nút back to top và back to bottom cho blogspot
<a class='toptop' href='javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCvxdTm_R2D3T-aTVwPoUVu4q_c9QWYFAlttDB67wWCUjA3ffsg3pv3f_gorZXHYZukmjFY_6pX_44sVXbiVVrW0XLo7gZe7tA66ooL1LwuFlyiIcd1hTdWPMUPgyzswoueIJ2y8Q-vew/s1600/back-to-top.png'/></a>
<a class='bottombottom' href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7uPRhSItMpdcF5opU5jkCGnpcdwkGl_WKiPLn_66rmIGK04hVWQPlKxtmV8GxD_irRDCQFMqV7WhbQ4AIc-cB6Q99zybrGM54v2dsrkbhZwu6ypOxXtY5HF9IQiy_OjIf6AL392Guf9c/s1600/back-to-bottom.png'/></a>
Chúc các bạn thành công!
Nguồn: Tôi Là Quản Trị BLOG
Một số lưu ý khi bình luận
> Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
> 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 phản hồi.
> Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.