Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Hướng dẫn tạo nút Scroll to top cho blogspot

Trần Bá Đạt bởi Trần Bá Đạt
14/12/2017
trong Blogspot, Thủ thuật Blogspot, Thủ thuật CNTT
1
CHIA SẺ
685
LƯỢT XEM
Chia sẻTweetPinChia sẻ

Nút (Button) Scroll to top là gì? Đó chính là cái button giúp chúng ta cuộn lên đầu trang 1 cách nhanh chóng khi click vào nó. Như các bạn thấy ở website Trần Bá Đạt (_CTPG_) này, nó chính là cái nút màu đỏ có mũi tên trắng hướng lên, bên phải, phía dưới, xuất hiện mỗi khi các bạn cuộn trang xuống dưới.

 tạo nút Scroll to top cho blogspot
Hướng dẫn tạo nút Scroll to top cho blogspot

Đi thẳng vào vấn đề luôn nào. Bài hướng dẫn này mình sẽ hướng dẫn cách tạo nút Scroll to Top bằng cách sử dụng hình ảnh có sẵn luôn nha. Hình ảnh nút Scroll to Top mình sẽ cung cấp sẵn, còn nếu muốn thì bạn có thể dùng bất cứ ảnh nào mà các bạn muốn laugh

  • Xem thêm: Tạo nút follow các mạng xã hội chạy dọc trang

Hướng dẫn tạo nút Scroll to Top:
– Đầu tiên vào trang quản trị blog, tiếp tục vào phần Bố cục:

 photo Screenshot 108_zps2lwzujxl.png

và thêm 1 tiện ích bất kỳ trên trang nhé, chọn HTML/Javascript. Hãy thêm đoạn code này vào vùng nội dung:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.backtotop’).fadeIn(duration);
} else {
jQuery(‘.backtotop’).fadeOut(duration);
}
});
jQuery(‘.backtotop’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href=”#” class=”backtotop”><img src=”DIRECT IMAGE URL” alt=”Back To Top”></a>

trong đó, chữ DIRECT IMAGE URL là vị trí của đường link ảnh của nút Scroll to Top. Sau đó lưu lại nhé.

– Giờ thì vào Template (Mẫu), Edit HTML (Chỉnh sửa HTML) nhá:

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

 photo Screenshot 109_zpsoblzzud5.png

Các bạn tìm đến thẻ ]]></b:skin>, và thêm đoạn code này vào phía trên nó, đây là đoạn CSS mô tả vị trí và hình dạng của nut Scroll to Top:

.backtotop {
position: fixed;
bottom: 10px; 
right: 20px; /* khoảng cách giữa button và mép phải */ 
padding: 0px; /* add space around the text */
}
.backtotop:hover {
bottom: 10px; 
right: 20px; /* khoảng cách giữa button và mép phải */
padding: 0px; /* add space around the text */
}

Rồi, bạn muốn chỉnh gì thì chỉnh nhé, thêm bớt gì cho đẹp thì tùy laugh

Sau đó lưu lại và tận hưởng thành quả của mình thôi ^_^
Đây là một nút dùng để làm Scroll to Top của mình:

Hướng dẫn tạo nút Scroll to top cho blogspot

Chúc các bạn có một giao diện web thật đẹp! Nhớ Like và G+ dùm mình nhé smile

Copy vui lòng ghi nguồn bài viết được viết bởi: https://www.tranbadat.com/
5/5 - (1 bình chọn)
Chia sẻ1TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
CÓ THỂ BẠN THÍCH
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

ĐƯỢC YÊU THÍCH

  • Tổng hợp 1000 icon Facebook 2018

    Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    13 chia sẻ
    Chia sẻ 11 Tweet 0
  • Hướng dẫn active theme Newspaper 12.1.1 dễ dàng và đơn giản

    2 chia sẻ
    Chia sẻ 1 Tweet 0
  • Hướng dẫn nhận key Office 2016 bản quyền, active Office 2016 mới nhất (Updated 2020)

    75 chia sẻ
    Chia sẻ 74 Tweet 0
  • Hướng dẫn tạo sitemap cực đẹp cho Blogspot

    0 chia sẻ
    Chia sẻ 0 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Chữ ký số Viettel CA
  • Hóa đơn điện tử viettel
  • bàn trang điểm đẹp
  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.