[Blogspot] - Tùy biến thanh cuộn - scrollbar đẹp bằng CSS3 cho blogspot

Tùy biến thanh cuộn - scrollbar đẹp bằng CSS3 cho blogspot

Hẳn các bạn đều biết thanh cuộn Scrollbar là gì rồi phải không? Nôm na nó là một thanh mà bạn có thể dùng chuột bấm vào đó để cuộn trang web lên xuống hay từ phải qua trái.

How To Change Scrollbar Color With css3 for BlogspotTùy biến thanh cuộn đẹp bằng CSS3 cho blogspot

Bạn có thể tìm thấy nó ở phía bên phải của mỗi trình duyệt. Giờ đây ta có thể thay đổi màu sắc và thiết kế cho nó bắt mắt hơn so với màu xám truyền thống thông qua các đoạn mã CSS3 webkit.

[Blogspot] - Tùy biến thanh cuộn - scrollbar đẹp bằng CSS3 cho blogspot

Đoạn CSS3 Webkit này sẽ thay thế các thanh cuộn HTML cổ điển ban đầu, bạn có thể tùy chỉnh lại nó theo ý thích của bạn. Blogger của bạn sẽ trông xinh đẹp, chuyên nghiệp hơn với sự giúp đỡ của CSS3. Hôm nay namkna sẽ hướng dẫn các bạn làm thế nào để thay đổi màu sắc thanh cuộn trang web của bạn, Tạo cho độc giả có cái nhìn mới hơn về trang web của bạn và cũng nhằm thu hút khác truy cập.

Các bạn có thể xem demo bằng cách xem bài viết này trên trình duyệt Google chroome nha.

» Cách thay đổi màu sắc thanh cuộn trình duyệt bằng CSS3 cho blogspot
1. Đăng nhập vào trang blog của bạn.
2. Vào phần Chỉnh sửa HTML (Edit HLM)
3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

/* Webkit override Scrollbar with CSS3 */::-webkit-scrollbar {width: 8px; height:8px;}::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);background:#fff;}::-webkit-scrollbar-thumb {background: rgba(186,35,35,0.8);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {background: rgba(186,35,35,0.4);    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);    }

- Bạn có thể điều chỉnh lại mã màu RGb trong đoạn code trên lại cho phù hợp với sở thích và tông màu blog của bạn bằng cách sử dụng một trong 2 bảng mã màu rbg sau: Bảng RGB color 1 hoặc Bảng RBD color 2

4. Lưu mẫu của bạn lại là xong. Giờ quay trở lại blog để xem nó hoạt động thế nào nha.

» Phạm vi hoạt động.
Do đây là mã CSS3 do vậy chỉ hoạt động trên một số trình duyệt hỗ trợ CSS3 như: Google Chroome, Moliza Firefox mới nhất, IE9+ trở lên.

Nguồn: www.terocket.com