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

Code:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>

Cách 2: Sử dụng Jquery

Code:

<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://mchiase.blogspot.com/"></a><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZie4eFBnbLojYXOdNFsPhPG5NlMXJ16IqdGbBo1rXtr9x9Oy372T7-V5k7VYl2BEDKYkEpgby2ZAyF-c6yxRDTJ02uS4LDKUBPRm86H3shoIasVKGcHhhU-jvrFCFR76kZL2GHcS-Ii1Z/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.