Tạo nút "Lên đầu trang" cho website, Blog
Friday, February 28, 2014
Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho Blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang".
Cách 1: Sử dụng hiệu ứng từ Jquery. View Demo
Cách 2: Sử dụng CSS. View Demo
Cách 1: Sử dụng hiệu ứng từ Jquery.
- Sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên Blogspot, thế là có bài đăng mới.
Xem Demo View Demo☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML).
4-Chèn đoạn code sau phía trên </body>:
<style type='text/css'> #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} #bttop:hover{border:1px solid #ffa789;background:#ff6734;} </style> <div id='bttop'>BACK TO TOP</div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>Trong đó:
- Thay chữ BACK TOP TOP thành chữ bạn muốn.
- Các bạn có thể tải file Jquery.js về sau đó Upload lên host riêng đề phòng link die. Nếu trong template của bạn đã có file Jquery.js thì có thể xóa đoạn code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'></script>- Sau đó bấm Lưu Mẫu lại.
Cách 2: Sử dụng CSS
Cách này chỉ sử dụngh hinh ảnh và đơn giản hơn rất nhiều. do vậy nhìn sẽ không mượt như cách trên. View Demo
☼ Cách tiến hành:1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Phầnt ử trang. (Layout)
4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PY7eCNqZ-UMfOWkrZVORUtxeiWztzhPiXJ6j-KQDOgGxqt-PZSlvQcTPHsj6AZM459QnuLFfxNFMilVni1IU9-edtYluL7UN-DmId3KhxiFe-ke4LYXHWeFp8jcUzkO4mShmz4H0eEQ/s1600/top-namkna-blogspot-com.gif"/></a>
Trong đó - Thay đổi chữ "Back to Top" thành hàng chữ nào mình thích (thí dụ: về đầu trang, lên trên...),
- Thay đổi link ảnh màu đỏ thành link ảnh bạn mong muốn. bạn VÀO ĐÂY hoặc kéo xuống cuối bài viết này để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào.
Chúc bạn thành công!
TAGS: Tạo nút "Lên đầu trang" cho website, Blog, CODE Back to Top, Back to Top html
Lien khuc nhac che tung chua 2015 lien khuc nhac che remix 2016
Bài liên quan
- Tất cả những gì bạn cần để trở thành một blogger
- Hướng dẫn chụp màn hình máy tính, laptop không cần phần mềm
- Code mở popup cửa sổ quảng cáo nhỏ dưới góc màn hình
- Sửa lỗi win 7
- Lưu trữ file JS (javascripts) và CSS lên host Google Drive cho website, blog...
- Phần mềm chỉnh sửa ảnh miễn phí, Download phần mềm chỉnh sửa ảnh
- Thủ thuật cơ bản cho người mới sử dụng Photoshop
- Cài đặt gói ngôn ngữ tiếng Việt cho Windows 8
- Khắc phục lỗi mạng wifi thường gặp
- Khắc phục các vấn đề thường gặp trên Android
- Cách đăng nhập Facebook khi bị chặn
- 10 thủ thuật facebook hữu ích