Tạo nút Back to Top cho blogger với hiệu ứng từ jQuery

Để 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". 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.

Bạn có thể xem Demo ngay tại bài viết này bằng cách kéo chuột xuống chân blog khi đó sẽ xuất hiện nút back to top ở góc phí dưới bên phải đó.

Ảnh minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sửa 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>

Lưu ý:  Các bạn có thể tải File Js về TẠI ĐÂY sau đó Upload lên host riêng đề phòng link die

- Sau đó bấm Lưu Mẫu lại. 

Cách khác: 

 Cách này chỉ sử dụngh ìm ả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.

Bạn có thể xem Demo ngay tại bài viết này bằng cách kéo chuột xuống chân blog khi đó sẽ xuất hiện nút back to top ở góc phí dưới bên trái đó.

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phầnt ử trang.

   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/AVvXsEjzEYIGfkx0VjuPVgYWQ4gSHCf9xLynbvvUaZNh0FimZytC7I3bfJ49BVQkQSfLDqUoSFI6ntmHFju2KgFqgn1ie2qmZ6itKA0UrtDnY9wSDkukKaCnmimeMZaQac543nBQdZEKdyrBaEk/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.

- Sau đó bấm Lưu Mẫu lại.

-P/s cách này chỉ tạo nút lên đầu trang do vậy nếu muốn thê mnút xuống cuối trang thì bạn xem Tại đây

Chúc thành công!

BACK TO TOP

Chủ đề: