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.

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}

DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.
Cám ơn.