Thêm nút trở về đầu trang vào Blogger smooth scrolling

Bạn chắt đã từng gặp một số trang hay bài viết có nội dung quá dài, khi đọc đến cuối trang thì việc lăn chuột lên cũng khiến bạn khó chịu và chắc bạn cũng đã từng thấy ở một số trang có thêm nút "Back to top" chỉ cần 1click là bạn được chuyển thẳng lên đầu ttrang đúng không?

Hôm nay mình sẽ hướng dẫn bạn thực hiện thủ thuật thêm nút Trở về đầu trang cho Blogger. Thủ thuật này mình cũng lượm lặt trên mạng, thấy hay nên share cho mọi người luôn,

Đầu tiên bạn vào trang tổng quan, Mẫu -> Chỉnh sửa HTML
Tìm thẻ  </body>: và chèn đoạn code sau phía trước nó.

<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>

Bấm lưu lại

Chúc các bạn thành công.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait