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:
- Xây dựng một trang blogspot như trang blogvuicuoilen (giới thiệu)
- Hướng dẫn tạo một trang blogspot (blogger)
- Tự thiết kế giao diện cho blogspot (dành cho người không biết code)
- Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout
- Thiết kế phần header cho blogspot
- Thiết kế menu cho blogspot
- Tùy chỉnh phần hiển thị nội dung của blogspot
- Tùy chỉnh sidebar cho blogspot
- Tùy chỉnh footer cho blogspot
- Thêm nút Share mạng xã hội cho blog của bạn
- Xây dựng giao diện mobile cho blogspot
- Thêm nút cuộn trang bằng CSS cho Blogspot
- Tối ưu giao diện để blogspot chuẩn SEO
 |
| 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/AVvXsEhhOq_0h-7xrUtXDE230kcShFnwGLymdtwAx4X6lqlXkED5YC98q6myXmRR4NP3ViApZVF8FgmsJNNwEceNBFxTZdbR09M5cCsg7kjy7IPCba-OrfTPT-pDHcpO4A3V3GAw1685JY-Pz9Q/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/AVvXsEhhOq_0h-7xrUtXDE230kcShFnwGLymdtwAx4X6lqlXkED5YC98q6myXmRR4NP3ViApZVF8FgmsJNNwEceNBFxTZdbR09M5cCsg7kjy7IPCba-OrfTPT-pDHcpO4A3V3GAw1685JY-Pz9Q/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é.
