Giới thiệu
Thanh cuộn (scrollbar) là gì?
Có bao giờ các bạn đã chán với thanh cuộn mặc định trong trang web của mình chưa? Bạn đã bắt gặp những trang web có thanh cuộn đẹp đẽ, gọn gàng, độc đáo!
Vì thế với mong muốn tìm hiểu và giúp đỡ các bạn cách đổi màu thanh cuộn (scrollbar) – CSS Custom Scrollbar theo ý muốn, trong bài viết ngắn này, chúng ta sẽ cùng sử dụng CSS3 để tạo ra một thanh cuộn đơn giản và thú vị!!!
Có thể tham khảo thêm:
Hướng dẫn đổi màu thanh cuộn
Thay màu scrollbar ở blogger/blogspot
- Bước 1: Đăng nhập vào Blogger
- Bước 2: Chọn Chủ đề -> Click mũi tên (kế bên Tuỳ Chỉnh) -> Chỉnh sửa HTML
- Bước 3: Nhấn tổ hợp Ctrl + F để tìm thẻ ]]></b:skin>
- Bước 4: Copy đoạn CSS bên dưới & dán vào ngay trên thẻ vừa tìm được.
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 0 #ffffff;background:#fff;border:0 solid #000}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 #ffffff;background:#0093da;border-radius:4px 4px 4px 4px; }
Thay màu scrollbar ở website mã nguồn khác
Copy & dán đoạn CSS bên dưới vào
/* Thay đổi kích thước và kiểu thanh cuộn */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Thiết lập màu nền cho thanh cuộn */
::-webkit-scrollbar-track {
background: #fff;
border: 0 solid #000;
}
/* Thiết lập màu cho nút trượt (thumb) */
::-webkit-scrollbar-thumb {
background: #0093da;
border-radius: 4px;
}
#0093da trong đoạn CSS là mã màu, các bạn có thể thay đổi và chọn mã màu mình thích
Link tìm mã màu CSS: Tại đây
CHÚC CÁC BẠN THÀNH CÔNG !!!
