Cách tạo thanh cuộn scrollbar đẹp cho blogspot

Bạn có thể thay đổi màu sắc và thiết kế cho thanh cuộn scrollbar trên trang web/blog của bạn trông 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. Chỉ cần một đoạn code CSS nhỏ là bạn đã có thể tạo ra một thanh cuộn trang web/blog với màu sắc tùy chọn của bạn, điều này cũng khá thú vị nhỉ. 

Đoạn CSS3 Webkit mà Vinll giới thiệu dưới đâ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. Vì đâ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, Cốc Cốc,…

Cách thay đổi màu sắc thanh cuộn scrollbar cho blogspot

Cách thực hiện rất đơn giản.

Bước 1: Đăng nhập vào tài khoản Blogger
Bước 2: Vào phần thiết kế (Design)
Bước 3: Chọn chỉnh sửa HTML (Edit HTML)
Bước 4: Tìm đến thẻ đóng ]]></b:skin> sau đó copy 1 trong 2 đoạn code bên dưới và dán vào phía trên thẻ đóng ]]></b:skin>

CSS
/* Đổi màu thanh cuộn trình duyệt */
::-webkit-scrollbar {
background:#E4DDDF;
width:11px;height:11px;
}
::-webkit-scrollbar-thumb {
background:#8DA59E;
border-radius:10px;
}

Các bạn có thể thay đổi mã màu sắc HEX ở background trong đoạn code trên cho phù hợp với blog của bạn nhé!

CSS
/* 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);
}

Các bạn có thể điều chỉnh lại mã màu RGb ở background trong đoạn code trên lại cho phù hợp với blog của bạn nhé!

Bước 5: Lưu mẫu của bạn lại là xong. Giờ quay trở lại blog để xem kết quả nha!

Chúc bạn thành công!