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! 
Điểm 4.6/5 dựa vào 87 đánh giá

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

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy 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 trả lờ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.