Tạo nút cuộn trang cho Blogspot bằng CSS cực đơn giản

GroupMMO tháng 11 06, 2017

Thủ thuật Blogger - Trong một bài viết, nếu ngắn thì các bạn chỉ cần thao tác cuộn một lần là có thể cuộn từ đầu trang tới cuối trang và ngược lại. Nhưng với những bài viết dài, việc cuộn từ cuối trang lên đôi khi lại trở nên rắc rối với nhiều người (không biết nút Home hay hỏng cuộn ở chuột). Vì thế có một nút lên đầu trang trong web đôi lúc rất cần thiết. Hôm nay chúng ta cùng tạo nút cuộn trang cho Blogspot bằng CSS cực đơn giản nhé.

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

Tạo nút cuộn trang cho Blogspot bằng CSS cực đơn giản

Lý do lựa chọn dùng CSS thay vì Javascrip hay Jquery: như trong những bài trước mình đã nói, khi làm một website yêu cầu cần phải load nhanh. Để làm được điều này cần hạn chế tối đa các hiệu ứng trên blog và tối ưu hóa hình ảnh. Do vậy, dù có rất nhiều cách làm nút cuộn trang cho blog nhưng mình sẽ dùng CSS để web có thể load tốt, nhẹ và nhanh nhất có thể.

Hướng dẫn tạo nút cuộn trang cho Blogspot bằng CSS cực đơn giản

Đầu tiên các bạn cần có một nút cuộn trang cho riêng mình. Để làm một nút cuộn trang các bạn hãy dùng các phần mềm như photoshop hoặc coreldraw nhé. Một cách nữa là các bạn có thể lên google tìm một số hình icon cuộn trang đẹp và tải về. Ví dụ mình tìm được một cái ảnh có đuôi .PNG như dưới đây.

Sau khi tải về máy mình tải ảnh đó lên trang này và lấy được link ảnh như sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfNlNh6_WJOvl8gSEoFGRz5dYWetVwuKvgUjGD39v9adkk5hkEaGEj49P1HkUtbV_1m3m7moebsbpZWqDbVQwsDTe5Eq6VeYHkBoCCYSuXKh5ZUTi1X0_y4A8_B5BByLtfO4Gw4EcSso/s1600/Top.png

Tiếp theo, các bạn vào Bố cục -> Thêm tiện ích (thêm ở đâu cũng được) --> HTML/Javascript

Phần tiêu đề: bỏ trống

Phần nội dung: Paste đoạn sau vào phần nội dung:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;z-index:1000;" href="#" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfNlNh6_WJOvl8gSEoFGRz5dYWetVwuKvgUjGD39v9adkk5hkEaGEj49P1HkUtbV_1m3m7moebsbpZWqDbVQwsDTe5Eq6VeYHkBoCCYSuXKh5ZUTi1X0_y4A8_B5BByLtfO4Gw4EcSso/s1600/Top.png" alt="nút cuộn đầu trang"/>
</a>

Phần màu đỏ các bạn thay bằng link ảnh mà các bạn có nhé. Nếu không có ảnh thì cứ để nguyên như của mình cũng được. Trang của mình hiện đang dùng code này nên các bạn có thể xem demo trên trang này luôn.

Chúc các bạn thành công, nếu có vấn đề gì để lại comment mình sẽ giải đáp nhé.