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! 
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2