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! 
18:25:00 0

CHIA SẺ NGAY:



ĐỀ XUẤT TỪ TÁC GIẢ:
Một số lưu ý khi bình luận

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

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


Chiến Lược Marketing