Đổi màu thanh cuộn (scrollbar) bằng CSS3 cho blogspot/website

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:

• Tạo khung bình luận nổi bật cho blogspot
• Cách tạo popup thông báo khi thoát Website/Blog

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;
}