Tạo nút lên đầu trang (Back To Top) cho Blogspot

Nút Back To Top hay còn gọi là nút lên đầu trang, nut len dau trang, code nut len dau trang , tạo nut back to top giúp cho người dùng tiện lợi hơn trong lúc đọc tin tức của trên trang web cuả bạn. Với nút Back To Top có thể giúp cho người dùng tiết kiệm thời gian khi muốn di chuyển hoặc tìm kiếm gì đó ở đầu trang. Đối với Blogger có nhiều template hỗ trợ tính năng này nhưng đối với những template blogspot đẹp không hỗ trợ thì bạn phải bó tay sao. Do đó bài viết này sẽ hướng dẫn cho bạn cách gắn nút lên đầu trang cho Blogspot một cách dễ dàng mà không cần phải rành về Code.

TẠO BACK TO TOP CHO BLOGGER

Bước 1: Đăng nhập tài khoản Gmail truy cập vào Blogger.com

Bước 2: Chọn tài khoản Blog mà bạn muốn thêm Gatget hay Tiện ích

Bước 3: Chọn Layout hay là Bố cục

Bước 4: Sau khi vào trong bố cục lựa chọn Add Gatget 

Bước 5: Lựa chọn thêm tiện ích HTML/Javascrip như hình dưới đây

Bước 6: Sau khi lựa chọn tiện ích đó bạn thêm đoạn code vào như trong hình và ấn Lưu

Thông thường thì có 2 loại cho bạn lựa chọn đó là Text hoặc Button

1. Text

Đoạn Code bạn cần thêm

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>
<a href="#" class="back-to-top">Lên Trên</a>

2. Button

Đoạn Code bạn cần thêm

<!--BACK-TO-TOP-STARTS-->
<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<!—www.khoahocseo.vn-- >
<a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZvdaHXPDQ3vhEFofFkZp6cWXzC6peiJoYO0W1tL5nKdhpbOW9B9jxGEIhJFwHHMEu1I0DsFAFJ1iO50worFafGo3uBzDN1Ui4BaWEKk5tl7QUhQj2tmOS0uBEWhA1vZmMVSMwLgTF7h8/s1600/go+to+top+button.jpg'alt=”go" to top image” /></a>
<!—www.khoahocseo.vn-- >
<!--BACK-TO-TOP-STOPS--></div>

Nút Back To Top hay còn gọi là nút lên đầu trang, nut len dau trang, code nut len dau trang , tạo nut back to top giúp cho người dùng tiện lợi hơn trong lúc đọc tin tức của trên trang web cuả bạn

Lưu ý: 

• Có một lưu ý nhỏ trong bước thêm tiện ích để tránh việc làm rối bố cục bên ngoài khi bạn phải thêm 1 tiện ích mới thì thay vào đó bạn chỉ cần thêm đoạn Code cần gắn vào trong 1 tiện ích HTML/Javascrip có sẵn. Tính năng sẽ vẫn xuất hiện như bình thường không ảnh hưởng gì cả.
• Ngoài ra, nếu bạn không muốn hình button lên đầu trang như trong hình thì có thể tạo một hình khác và thay vào đó theo kích thước mà bạn muốn.