Chắc hẳn nhiều bạn thấy các trang blog bây giờ hay có một cái Nút treo lơ lửng ở chân trang (thường là bên phải) để phục vụ việc quay trở lại đầu trang ngay lập tức, mà không cần phải kéo hay scroll thanh trượt….Nút Back to Top này rất tiện lợi với người dùng, đặc biệt với các bài viết dài, site bị kéo dài và nhiều thông tin. Hoặc site bạn chưa có một Menu được ghim cố định. Và người đọc buộc lòng phải trượt lại đầu trang.

Thêm Nút Lên Đầu Trang - Back To Top Button 8

Back To Top Button

Là một xu thế đang dần phổ biến, nếu site bạn chưa có thì hãy cập nhật ngay nào

Cách thêm Nút Back To Top vào trang blogger/blogspot

Đầu tiên Log-in blogger và vô trong HTML
CTR+F: jquery
Kiểm trang trong HTML xem có JQUERY chưa nhé. Có rùi thì bỏ qua công đoạn này.
Nếu trong HTML của bạn chưa có thì chèn thẻ Script dưới đây vào trong thẻ <head> nhé:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Tiếp theo: Thêm đoạn code dưới đây vào trong thẻ <body> . Nên trước thẻ đóng </body> là OK

Code:

<!--Back to Top Button Start-www.thenaynhe.com--><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 {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="#" alt="Back to Top" /></a>
<!--Back to Top Button End-www.thenaynhe.com-->

Bấm Save HTML. Và kiểm tra blog đi nào

Link màu blue là hình ảnh Button. Bạn có thể tự thiết kế một kiểu và thay vô. Hoặc vô Google image search với từ khóa: back to top . Sẽ có vô số hình ảnh để lựa chọn 🙂
Dưới đây là một số ảnh button tham khảo:

Thêm Nút Lên Đầu Trang - Back To Top Button 9

 

Thêm Nút Lên Đầu Trang - Back To Top Button 10
Thêm Nút Lên Đầu Trang - Back To Top Button 11
Thêm Nút Lên Đầu Trang - Back To Top Button 12
Thêm Nút Lên Đầu Trang - Back To Top Button 13
Goodluck  😆 ^^

cùng hội cùng thuyền nè:
Hướng dẫn chạy Quảng Cáo Youtube từ A-Z

Youtube là kênh video thuộc Google nên chạy quảng cáo youtube với google ads là....

Tình Hình Kiếm Tiền Từ Google Adsense ? Giá CPC Tại Việt Nam ?

Kiếm tiền MMO qua google adsense hay kiếm tiền qua kênh google adsense là một....

Lỗi 404 301 302 Là Gì ? Status Code HTTP

301 / 500 / 404 error… Là gì ? Chắc hẳn ace làm web đều....

Tổng Hợp Danh Sách Báo Chí – Báo Điện Tử Việt Nam

Hôm nay ngồi check thông tin Website báo chí để phục vụ việc chạy quảng....

Tổng Hợp Code Chức Năng Website WordPress

Tổng hợp một số code cho Theme Flatsome và cũng có thể tương thích với....

Lựa chọn Hosting tốt nhất Việt Nam

thenaynhe giới thiệu một số Server / VPS / Hosting Tốt Nhất Việt Nam & Thế....

Leave a Reply

Your email address will not be published. Required fields are marked *