Tạo nút Lên đầu trang (Back to top) cho Blogspot

Tạo nút Lên đầu trang (Back to top) cho Blogspot
Tiện ích nút Lên đầu trang là ứng dụng khá tiện lợi khi độc giả đọc hết bài viết của bạn có nội dung tương đối dài, thay vì độc giả phải cuộn chuột hoặc kéo thanh trượt dọc để về trang đầu khá mắc công…

Nút Lên đầu trang thường được tạo ra bởi 2 cách: Sử dụng CSS hoặc Sử dụng Jquery (Ở 2 cách trên đề có 2 cách nhỏ: Sử dụng chữ hoặc hình ảnh để là “biểu tượng” cho nút Back to top).

Đọc thêm:



Đến với hôm nay Windows2it sẽ hướng dẫn các bạn cả 2 cách để tạo nút Back to top và cả hai cách này đều sử dụng ảnh để là biểu trượng cho nút Back to top.

☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Cách 1: Sử dụng CSS

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>  
Cách 2: Sử dụng Jquery

<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a href="http://www.windows2it.com/">
</a><a id='noop-top' style='display: none; position: fixed; 
bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='https://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/></a>
☼ Tùy chỉnh

·        800 là tốc độ khi cuộn trang, các bạn cũng có thể tùy chỉnh theo ý muốn.

·        Thay đổi link ảnh màu xanh thành link ảnh bạn mong muốn, dưới đây mình cũng sưu tâm một số ảnh thích cái nào thì tải về upload lên, rồi lấy link hình thay vào lưu lại là oke nhé @!







☼ Kết luận

·        Tiện tích này quá đơn giản nên mình không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết cho các bạn tham khảo.

·        Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>

·        Đối với cách 1 sử dụng CSS thì tốc độ load site của bạn sẽ nhanh hơn rất nhiều so với cách 2 sử dụng Jquery (xử lý Jquery). Nhưng cách 1 cách lại không có hiệu ứng đối với cách 2 lại có hiệu ứng cuộn lên khá đẹp.


Còn bạn muốn Support gì thì cứ để lại comment @!

Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

29 nhận xét:

  1. Adm cho xin cái link ảnh về đầu trang của adm đi, bản pro thế mà lại ko thấy cho anh em :))

    ReplyDelete
    Replies
    1. thủ thuật này kèm theo hiệu ứng chạy hình .. Cho hình cũng bằng thừa .... Thui mình cả code + Hình luôn :) chỉ cần Copy patse là xong :)
      http://codepen.io/quangmen93/pen/LGooRa?editors=0010

      Delete
    2. ad ơi mình làm ko đc :|, mình chép cái code trong link bạn đưa vào tiện widget mà nó ko hiện

      Delete
    3. trang bạn đâu cho mình xem qua cái .... :) coi thử bị lỗi gì

      Delete
  2. AD biết code tạo cột ngang ngay sát dưới cuối bài viết blogspot chỉ mình với. Mình muốn tạo cộ ngang này rông 468px cho tiện đặt quảng cáo cuối bài. Thanks ad trước nhé !

    ReplyDelete
    Replies
    1. Nếu bạn chằn quảng cáo vào cuối mỗi bài viết thì thiết lập trực tiếp trong template ko cần tạo cột ngang gì hết ... Như vậy kết cấu đỡ phức tạp hơn và nhẹ hơn phần nào :)

      Delete
  3. ad cho mình hỏi: mình chép vào sublime text để chạy thử xem ra thế nào. lúc chạy xong chả có gì. vậy cái này chỉ dành cho blog thôi hả. làm giống web ad k đc ah

    ReplyDelete
    Replies
    1. Blog cá nhân thui có web gì đâu bạn ... Blog của mình đi từ nền tảng blogger :)

      Delete
  4. nếu chèn trực tiếp vào html thì nên chèn trước thẻ head hay thẻ ]]> vay bạn

    ReplyDelete
  5. nếu chèn trực tiếp vào html thì nên chèn trước thẻ head hay thẻ ]]> vay bạn

    ReplyDelete
    Replies
    1. thẻ head hay thẻ body thẻ nào cũng được hết bạn ơi :)

      Delete
  6. Ad cho mình hỏi, mình dùng themes Sevida nhưng mình không tìm được lí do vì sao mà "Load more posts" không hiển thị các trang mới và thiết lập số trang load mặc định chỉ có tác dụng nếu giá trị nhỏ hơn hoặc bằng 8

    https://drive.google.com/file/d/0B5QVuVFkIneiMHBGUE5lMWt4SnM/view?usp=sharing

    ReplyDelete
    Replies
    1. template Sevida bản miễn phí đang lỗi vấn đề này !!! Bạn nên dùng bản có phí ấy !!!

      Delete
    2. Cám ơn bạn đã trả lời, mình biết là lỗi, chủ yếu để tìm nguyên nhân lỗi, nó lỗi ở hàm loadMorePost(e) nhưng chưa bắt được nó lỗi đoạn nào trong hàm đó

      Delete
    3. mình đã fix được lỗi đó rồi
      sửa t.get(r.olderPostsLink,"html") thành t.get(r.olderPostsLink,"") là ok liền

      Delete
  7. Cho mình xin code back top của bạn đi :))))

    ReplyDelete
  8. cho xin code back to top của web ad đi ạ :D

    ReplyDelete
  9. mình làm được rồi, cảm ơn bạn

    ReplyDelete
  10. Mình làm đc rồi, nhưng mà nó bị to quá, làm sao để nó bé lại vậy ah?

    ReplyDelete
  11. Làm phiền ad ngó qua xem giúp trang của mình làm y như hướng dẫn mà không được. Cảm ơn ad
    http://www.tranbinhtrong.vn/

    ReplyDelete
    Replies
    1. Cập nhật lại link ảnh ... là oke nha (thay link ảnh khác nha)

      Delete
    2. This comment has been removed by the author.

      Delete
  12. minh không làm được bạn ơi

    ReplyDelete
  13. Ngoài cách trên thì mình còn thấy, vào trang https://scrolltotop.org rồi chọn nút mình thích xong dán code tương ứng vào á

    ReplyDelete