0 bình luận · lượt xem

Tạo nút Back to top và back to bottom cho blogger



Hướng dẫn các bạn tạo nút back to top và nút back to bottom cài đặt trong blog sẽ giúp bạn di chuyển lên đầu trang và cuối trang một cách nhanh chóng thay vì phải tốn rất nhiều thời gian để cuộn trang.
Đối với blog tin tức, nội dung bài viết dài thì tiện ích back to bottom sẽ giúp đọc giả cuộn xuống chân trang nhanh chóng để đọc các thông tin cuối trang.

Back to top và back to bottom cho blogger



1. Đăng nhập và mẫu tìm </body>

Chèn code Javascript để tạo nút back to top và back to bottom

<!-- #BACKTOTOP -->
<div id='bttop'><i class='fa fa-chevron-up'/></div><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>
<a class='bottombottom' href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><i class='fa fa-chevron-down'/></a>
</b:if>

2. Chèn code CSS trên trước thẻ ]]></b:skin>

Chèn code CSS để tạo nút nút back to top và back to bottom

Bạn có sửa lại màu sắc của 2 nút này:
#bttop{background:#F77B09;text-align:center;padding:13px;position:fixed;bottom:50%;right:0px;cursor:pointer;display:none;color:#fff;font-size:15px;font-weight:900}
#bttop:hover{background:#24bde2;border-bottom:4px solid #F77B09}
.bottombottom{position:fixed;z-index:3;bottom:43%;right:0;background:#ff4d11;padding:12px 13px;color:#fff!important;font-size:15px}.bottombottom:hover{background:#24bde2;border-top:4px solid #F77B09}

Chúc bạn thành công! 



Không có nhận xét nào:

NỘI QUY:
  • 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.

Hãy cùng tham gia bình luận về bài viết này nhé!